Bootstrap 模态框(Modal)插件
Bootstrap 模态框(Modal)
Bootstrap 模态框(Modal)插件是一个快速创建弹出窗口的工具,它可以用于展示一些重要的信息、数据、表格,也可以用于登录、注册、修改密码等操作。
使用方法
引入JavaScript文件
Bootstrap 模态框(Modal)需要引入bootstrap.min.js 文件,可以使用以下代码进行引入:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.4/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
创建模态框的HTML结构
使用Bootstrap 模态框(Modal)需要包含以下结构:
.modal
:模态框主体.modal-dialog
:模态框对话框.modal-content
:模态框主体内容.modal-header
:模态框头部.modal-body
:模态框主体.modal-footer
:模态框底部
以下是示例代码:
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">模态框标题</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<p>模态框主体内容</p>
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
触发模态框
通过 JavaScript,我们可以触发模态框的展示。
下面是一个按钮,通过点击该按钮来触发模态框的展示:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button>
调用javascript弹出模态框
可以使用以下代码弹出模态框:
$("#myModal").modal();
参数说明
Bootstrap模态框(Modal)提供了一些参数可供设置,下面是一些可配置的参数:
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
backdrop | boolean | true | 在模态框外部点击时是否关闭模态框。 |
keyboard | boolean | true | 当按下 ESC 键时是否关闭模态框。 |
focus | boolean | true | 当模态框展示时,是否自动 focus 到模态框上。 |
show | boolean | true | 是否在模态框初始化时显示模态框。 |
remote | string | null | 如果要使用远程 URL 获取模态框,则在此处提供 URL。 |
backdrop | string | fade | 在模态框展示或关闭时,背景颜色的变化效果。 |
keyboard | function() | function(){} | 如果按下 ESC 键关闭模态框时,执行的回调函数。 |
show | function() | function(){} | 在模态框展示时,执行的回调函数。 |
shown | function() | function(){} | 在模态框展示完成后,执行的回调函数。 |
hide | function() | function(modal){} | 在模态框关闭时,执行的回调函数。 |
hidden | function() | function(modal){} | 在模态框关闭后,执行的回调函数。 |
remote | function() | function(event){} | 获取远程 URL 内容时,调用的函数。 |
结语
Bootstrap模态框(Modal)是一个快速、方便的工具,用于创建弹出窗口。通过正确的配置和使用,可以很方便的让我们实现各种功能,提升用户体验,美化应用界面。