Bootstrap模态框（Modal）的属性及⽅法
⽤法
您可以切换模态框（Modal）插件的隐藏内容：
通过 data 属性：在控制器元素（⽐如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-
target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
通过 JavaScript：使⽤这种技术，您可以通过简单的⼀⾏ JavaScript 来调⽤带有 id="identifier" 的模态框：
$('#identifier').modal(options)
实例
⼀个静态的模态窗⼝实例，如下⾯的实例所⽰：
实例
<h2>创建模态框（Modal）</h2> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-
target="#myModal">开始演⽰模态框</button> <!-- 模态框（Modal） --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content">
<div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4> </div> <div class="modal-body">在这⾥添加⼀些⽂本
</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div>
结果如下所⽰：
代码讲解：
使⽤模态窗⼝，您需要有某种触发器。您可以使⽤按钮或链接。这⾥我们使⽤的是按钮。
如果您仔细查看上⾯的代码，您会发现在 <button> 标签中，data-target="#myModal" 是您想要在页⾯上加载的模态框的⽬标。您可以在页⾯上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同⼀时间加载多个模块，但您可以在页⾯上创建多个在不同时间进⾏加载。
在模态框中需要注意两点：
1. 第⼀是 .modal，⽤来把 <div> 的内容识别为模态框。
2. 第⼆是 .fade class。当模态框被切换时，它会引起内容淡⼊淡出。
aria-labelledby="myModalLabel"，该属性引⽤模态框的标题。
属性 aria-hidden="true" ⽤于保持模态窗⼝不可见，直到触发器被触发为⽌（⽐如点击在相关的按钮上）。
<div class="modal-header">，modal-header 是为模态窗⼝的头部定义样式的类。
class="close"，close 是⼀个 CSS class，⽤于为模态窗⼝的关闭按钮设置样式。
data-dismiss="modal"，是⼀个⾃定义的 HTML5 data 属性。在这⾥它被⽤于关闭模态窗⼝。
class="modal-body"，是 Bootstrap CSS 的⼀个 CSS class，⽤于为模态窗⼝的主体设置样式。
class="modal-footer"，是 Bootstrap CSS 的⼀个 CSS class，⽤于为模态窗⼝的底部设置样式。
data-toggle="modal"，HTML5 ⾃定义的 data 属性 data-toggle ⽤于打开模态窗⼝。
选项
有⼀些选项可以⽤来定制模态窗⼝（Modal Window）的外观和感观，它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：
选项名称类型/默认值Data 属性
名称
描述
backdrop boolean 或 string
'static'
默认值：true
data-
backdrop
指定⼀个静态的背景，当⽤户点击模态框外部时不会关闭模态框。
keyboard boolean
默认值：true
data-
keyboard
当按下 escape 键时关闭模态框，设置为 false 时则按键⽆效。
show boolean
默认值：true
data-show当初始化时显⽰模态框。
remote path
默认值：false
data-
remote
使⽤ jQuery .load ⽅法，为模态框的主体注⼊内容。如果添加了⼀个带有有效 URL 的 href，则会加载
其中的内容。如下⾯的实例所⽰：
<a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>
⽅法
下⾯是⼀些可与 modal() ⼀起使⽤的有⽤的⽅法。
⽅法描述实例
Options: .modal(options)把内容作为模态框激活。接受⼀个可选的选项对象。$('#identifier').modal({ keyboard: false
})
Toggle: .modal('toggle')⼿动切换模态框。
$('#identifier').modal('toggle') Show: .modal('show')⼿动打开模态框。
$('#identifier').modal('show') Hide: .modal('hide')⼿动隐藏模态框。
$('#identifier').modal('hide')实例
下⾯的实例演⽰了⽅法的⽤法：
实例
<!-- 模态框（Modal） --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button
type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title"
id="myModalLabel">模态框（Modal）标题</h4> </div> <div class="modal-body">按下 ESC 按钮退出。</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button"class="btn btn-primary">提交更改</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div> <!--/.modal -->
结果如下所⽰：
只需要点击 ESC 键，模态窗⼝即会退出。
事件
下表列出了模态框中要⽤到事件。这些事件可在函数中当钩⼦使⽤。cssclass属性
事件描述实例
dal 在调⽤ show ⽅法后触发。$('#identifier').on('dal', function () {
// 执⾏⼀些动作...
})
dal 当模态框对⽤户可见时触发（将等待 CSS 过渡效果完成）。$('#identifier').on('dal', function () {
// 执⾏⼀些动作...
})
dal 当调⽤ hide 实例⽅法时触发。$('#identifier').on('dal', function () {
// 执⾏⼀些动作...
})
dal 当模态框完全对⽤户隐藏时触发。$('#identifier').on('dal', function () {
// 执⾏⼀些动作...
})
实例
下⾯的实例演⽰了事件的⽤法：
实例
<!-- 模态框（Modal） --> <h2>模态框（Modal）插件事件</h2> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演⽰模态框</button> <!-- 模态框（Modal） --> <div class="modal fade"
id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4> </div> <div class="modal-body">点击关闭按钮检查事件功能。</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">提交更改</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div> <!-- /.modal --> <script> $(function() { $('#myModal').modal('hide') }); </script> <script> $(function() { $('#myModal').on('dal', function() { alert('嘿，我听说您喜欢模态框...'); }) }); </script>
结果如下所⽰：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。