PHP前端开发

bootstrap模态框怎么做

百变鹏仔 1个月前 (11-13) #bootstrap
文章标签 怎么做
如何使用 bootstrap 创建模态框?创建一个具有适当 html 结构的模态框。包含 bootstrap 和 jquery 库以启用模态功能。使用 javascript 或 jquery 代码显示或隐藏模态框。

如何使用 Bootstrap 创建模态框

引言

Bootstrap 提供了一个简单的 API 来创建交互式的模态框,允许你弹出信息、表单或其他内容,而无需重新加载页面。

创建模态框

  1. 添加基本 HTML:
<div class="modal" id="myModal" tabindex="-1">  <div class="modal-dialog">    <div class="modal-content">      <div class="modal-header">        <h5 class="modal-title">模态框标题</h5>        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>      </div>      <div class="modal-body">        模态框内容...      </div>      <div class="modal-footer">        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>        <button type="button" class="btn btn-primary">保存</button>      </div>    </div>  </div></div>
  1. 包含 Bootstrap 和 jQuery:

确保你在 HTML 页面中包含 Bootstrap 和 jQuery 库:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script><script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>

打开和关闭模态框

使用 JavaScript 或 jQuery 代码来显示或隐藏模态框:

显示模态框:

$('#myModal').modal('show');

隐藏模态框:

$('#myModal').modal('hide');

其他选项

Bootstrap 模态框还提供各种其他选项,如: