模态框(Modal)插件

模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

想要单独引用该插件的功能,需要引用modal.js。或者,引用bootstrap.js或压缩版的bootstrap.min.js。

用法

可以切换模态框(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" tabinde="-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="myModalLable">模态框(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>
  </div>
</div>

代码讲解:

  • 使用模态窗口,需要有某种触发器。可以使用按钮或者链接。这里我们使用的是按钮。
  • 如果你仔细查看上面的代码,会发现在<button>标签中,data-target=”#myModal”是想要在页面上加载的模态框的目标。可以在页面上创建多个模态框,然后为每个模态框创建不同的触发器。现在,很明显,不能再同一时间加载多个模块,但可以在页面上创建多个在不同时间进行加载。
  • 在模态框中需要注意两点:
  1. 第一是.modal,用来把<div>的内容识别为模态框。
  2. 第二是.fade class。当模态框被切换时,它会引起内容淡入淡出。

– aria-lablelledby=”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 -->

<script>
$(function() {
    $('#myModal').modal({
        keyboard: true
    })
});
</script>

只需要点击ESC键,模态窗口即会退出。

事件

事件 描述
show.bs.modal 在调用show方法后触发。
shown.bs.modal 当模态框对用户可见时触发(将等待CSS过渡效果完成)。
hide.bs.modal 当调用hide实例方法时触发。
hidden.bs.modal 当模态框完全对用户隐藏时触发。
<!-- 模态框(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('hide.bs.modal',
    function() {
        alert('嘿,我听说您喜欢模态框...');
    })
});
</script>

如果您点击了 关闭 按钮,即 hide 事件,则会显示一个警告消息。

打赏