Modal 插件（Modal Plugin）

优质

小牛编辑

129浏览

2023-12-01

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

如果您想单独包含此插件功能，那么您将需要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事件，则会显示警告消息。