目录
  1. WIKI教程
  2. 学习Bootstrap
  3. Bootstrap - Modal插件( Modal Plugin)

Bootstrap - Modal插件( Modal Plugin)

模态是在其父窗口上分层的子窗口。 通常，目的是显示来自单独源的内容，该源可以在不离开父窗口的情况下进行一些交互。 子窗口可以提供信息，交互等。

如果您想单独包含此插件功能，那么您将需要modal.js 。 另外，如Bootstrap插件概述一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js 。

用法 (Usage)

您可以切换模态插件的隐藏内容 -

  • Via data attributes - 在控制器元素上设置属性data-toggle = "modal" ，如按钮或链接，以及data-target = "#identifier"或href = "#identifier"以定位特定模态（使用id =“identifier”）切换。

  • Via JavaScript - 使用这种技术，您可以使用一行JavaScript调用id =“identifier”的模态 - 

$('#identifier').modal(options)

例子 (Example)

以下示例中显示了静态模态窗口示例 - 

<h2>Example of creating Modals with Twitter Bootstrap</h2>
<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</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">
               This Modal title
            </h4>
         </div>
         <div class = "modal-body">
            Add some text here
         </div>
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
新页面打开

Details of the preceding code −

  • 要调用模态窗口，您需要具有某种触发器。 您可以使用按钮或链接。 这里我们使用了一个按钮。

  • 如果您查看上面的代码，您会看到在 此代码允许您在页面上创建多个模态，然后为每个模式设置不同的触发器。 现在，要清楚，您不能同时加载多个模态，但您可以在不同时间加载的页面上创建许多模式。

  • 模态中有两个类需要注意 -

    • 第一个是.modal ，它只是将“div”的内容标识为模态。

    • 第二个是.fade类。 切换模态时，会导致内容淡入淡出。

  • aria-labelledby = "myModalLabel" ，属性引用模态标题。

  • 属性aria-hidden = "true"用于保持模态窗口不可见，直到触发器出现（如单击相关按钮）。

  • ，modal-header是为模态窗口的标题定义样式的类。

  • class = "close" ，是一个CSS类关闭，它为模态​​窗口的“关闭”按钮设置样式。

  • data-dismiss = "modal" ，是一个自定义的HTML5数据属性。 在这里它用于关闭模态窗口。

  • class = "modal-body" ，是一个CSS类的Bootstrap CSS，用于设置模态窗口主体的样式。

  • class = "modal-footer" ，是一个CSS类的Bootstrap CSS，用于设置模态窗口页脚的样式。

  • data-toggle = "modal" ，HTML5自定义数据属性数据切换用于打开模态窗口。

选项 (Options)

某些选项可以通过数据属性或JavaScript传递，以自定义模态窗口的外观。 下表列出了选项 -

选项名称 类型/默认值 数据属性名称 描述
backdrop 布尔值或字符串'static' Default: true data-backdrop 如果您不希望在用户单击模态外部时关闭模态，请为背景指定静态。
keyboard boolean Default: true data-keyboard 按下转义键时关闭模态; 设置为false以禁用。
show boolean Default: true data-show 初始化时显示模态。
remote path Default: false data-remote

使用jQuery .load方法，将内容注入模态体。 如果添加了具有有效URL的href，则会加载该内容。 这方面的一个例子如下所示 - 

<a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>

方法 (Methods)

以下是一些可用于modal（）的有用方法。

方法 描述 例
Options - .modal（选项） 将您的内容激活为模态。 接受可选的选项对象。 
$('#identifier').modal({
   keyboard: false
})
Toggle - .modal（'切换'） Manually toggles a modal.
$('#identifier').modal('toggle')
Show - .modal（'show'） 手动打开模态。 
$('#identifier').modal('show')
Hide - .modal（'隐藏'） Manually hides a modal.
$('#identifier').modal('hide')

例子 (Example)

以下示例演示了方法的用法 - 

<h2>Example of using methods of Modal Plugin</h2>
<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</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">
               This Modal title
            </h4>
         </div>
         <div class = "modal-body">
            Press ESC button to exit.
         </div>
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>
新页面打开

只需单击Esc按钮，即可退出模态窗口。

事件 (Events)

下表列出了使用模态的事件。 这些事件可用于挂钩函数。

事件 描述 例
show.bs.modal 调用show方法后触发。 
$('#identifier').on('show.bs.modal', function () {
   // do something…
})
shown.bs.modal 当模态已对用户可见时将触发（将等待CSS过渡完成）。 
$('#identifier').on('shown.bs.modal', function () {
   // do something…
})
hide.bs.modal 调用hide实例方法时触发。 
$('#identifier').on('hide.bs.modal', function () {
   // do something…
})
hidden.bs.modal 当模态完成对用户隐藏时触发。 
$('#identifier').on('hidden.bs.modal', function () {
   // do something…
})

例子 (Example)

以下示例演示了事件的用法 - 

<h2>Example of using events of Modal Plugin</h2>
<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</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">
               This Modal title
            </h4>
         </div>
         <div class = "modal-body">
            Click on close button to check Event functionality.
         </div>
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </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('Hey, I heard you like modals...');})
   });
</script>
新页面打开

如上面的屏幕所示，如果单击“ Close按钮即hide事件，则会显示警告消息。

<上一篇.Bootstrap - Transition插件( Transition Plugin)
Bootstrap - Dropdown插件( Dropdown Plugin).下一篇>
↑回到顶部↑
WIKI教程 @2018