Bootstrap - 模态框插件

上一页
下一页

模态框是一个子窗口，覆盖在其父窗口之上。通常，其目的是显示来自独立来源的内容，以便在不离开父窗口的情况下进行交互。子窗口可以提供信息、交互或更多功能。

如果您想单独包含此插件的功能，则需要 modal.js。否则，如章节 Bootstrap 插件概述 中所述，您可以包含 bootstrap.js 或压缩的 bootstrap.min.js。

用法

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

  • 通过数据属性 - 在控制器元素（如按钮或链接）上设置属性 data-toggle = "modal"，以及 data-target = "#identifier" 或 href = "#identifier" 来定位要切换的特定模态框（其 id = "identifier"）。

  • 通过 JavaScript - 使用此技术，您可以用一行 JavaScript 调用 id = "identifier" 的模态框 -

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

示例

以下示例显示了一个静态模态框窗口：-

在线演示 
<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">
                  &times;
            </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 -->

前面代码的详细信息 -

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

  • 如果您查看上面的代码，您会发现在 <button> 标签中，data-target = "#myModal" 是您想要在页面上加载的模态框的目标。此代码允许您在页面上创建多个模态框，然后为每个模态框设置不同的触发器。现在，需要明确的是，您不会同时加载多个模态框，但您可以在页面上创建多个模态框，以便在不同时间加载。

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

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

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

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

  • 属性 aria-hidden = "true" 用于在触发器出现（例如，单击关联按钮）之前保持模态框窗口不可见。

  • <div class = "modal-header">，modal-header 是定义模态框窗口标题样式的类。

  • class = "close"，是设置模态框窗口关闭按钮样式的 CSS 类 close。

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

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

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

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

选项

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

选项名称 类型/默认值 数据属性名称 描述
backdrop 布尔值或字符串 'static' 默认值：true data-backdrop 如果不想在用户单击模态框外部时关闭模态框，则指定 static 作为背景。
keyboard 布尔值 默认值：true data-keyboard 按下 Esc 键时关闭模态框；设置为 false 以禁用。
show 布尔值 默认值：true data-show 初始化时显示模态框。
remote 路径 默认值：false data-remote

使用 jQuery 的 .load 方法将内容注入到模态框主体中。如果添加了具有有效 URL 的 href，它将加载该内容。下面显示了此示例 -

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

方法

以下是一些可与 modal() 一起使用的方法。

方法 描述 示例
选项 - .modal(options) 将您的内容激活为模态框。接受可选的选项对象。 
$('#identifier').modal({
   keyboard: false
})
切换 - .modal('toggle') 手动切换模态框。 
$('#identifier').modal('toggle')
显示 - .modal('show') 手动打开模态框。 
$('#identifier').modal('show')
隐藏 - .modal('hide') 手动隐藏模态框。 
$('#identifier').modal('hide')

示例

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

在线演示 
<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 键，模态框窗口就会退出。

事件

下表列出了与模态框一起使用的事件。这些事件可用于挂钩到函数中。

事件 描述 示例
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…
})

示例

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

在线演示 
<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>

如上图所示，如果您点击“关闭”按钮，即 隐藏 事件，则会显示一条警报消息。

打印页面
上一页
下一页
广告