bootstrap4模态框弹出效果

这是一个基于Bootstrap 4的模态框弹出效果的示例代码：

HTML代码：

<!-- 模态框弹出按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  弹出模态框
</button>

<!-- 模态框弹出窗口 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">模态框标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>这里是模态框的内容</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

CSS代码：

/* 设置模态框弹出窗口的样式 */
.modal-dialog {
    max-width: 600px;
}

/* 设置模态框标题的样式 */
.modal-header {
    background-color: #007bff;
    color: #fff;
}

/* 设置模态框关闭按钮的样式 */
.modal-header .close {
    color: #fff;
}

/* 设置模态框保存按钮的样式 */
.modal-footer .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

/* 设置模态框关闭按钮和保存按钮之间的间距 */
.modal-footer .btn-secondary {
    margin-right: 10px;
}

JavaScript代码：

// 初始化模态框
$('#myModal').modal({
    backdrop: 'static',
    keyboard: false,
    show: false
});

这段代码中，我们使用了Bootstrap 4的模态框组件来实现弹出效果。我们首先创建了一个按钮，设置了data-toggle和data-target属性，这两个属性用于触发模态框的弹出。然后，我们创建了一个模态框的弹出窗口，设置了id属性和aria-labelledby属性，这两个属性用于指定模态框的唯一标识和标题。在模态框的弹出窗口中，我们分别创建了模态框的标题、内容和底部按钮。最后，我们使用JavaScript代码来初始化模态框，设置了backdrop、keyboard和show属性，这些属性用于控制模态框的行为。