📌  相关文章
📜  Bootstrap-模态插件

📅  最后修改于: 2020-10-27 06:20:19             🧑  作者: Mango

 

模态是子窗口，位于其父窗口之上。通常，其目的是显示来自单独来源的内容，这些内容可以进行一些交互而不离开父窗口。子窗口可以提供信息，交互或更多信息。

如果要单独包含此插件功能，则需要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)

例

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

现场演示
Example of creating Modals with Twitter Bootstrap

前面代码的详细信息-

  • 要调用模式窗口，您需要某种触发器。您可以使用按钮或链接。在这里，我们使用了一个按钮。
  • 如果您在上面的代码中查看，您会看到在
  • 模态中有两个类需要注意-
    • 第一个是.modal ，它只是将
      的内容标识为模态。
    • 其次是.fade类。切换模态时，将导致内容淡入和淡出。
  • aria-labelledby =“ myModalLabel” ，属性引用模式标题。
  • 属性aria-hidden =“ true”用于使“模态窗口“保持不可见，直到触发器出现(例如单击关联的按钮)。
  • ，modal-header是用于定义模式窗口标题的样式的类。
  • class =“ close” ，是一个CSS类关闭，它为模式窗口的“关闭”按钮设置样式。
  • data-dismiss =“ modal”是自定义HTML5数据属性。在这里它用于关闭模式窗口。
  • class =“ modal-body” ，是Bootstrap CSS的CSS类，用于设置模式窗口主体的样式。
  • class =“ modal-footer” ，是Bootstrap CSS的CSS类，用于设置模式窗口的页脚样式。
  • data-toggle =“ modal” ，HTML5自定义数据属性data-toggle用于打开模式窗口。

选件

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

Option Name Type/Default Value Data attribute name Description
backdrop boolean or the string ‘static’ Default: true data-backdrop Specify static for a backdrop, if you don’t want the modal to be closed when the user clicks outside of the modal.
keyboard boolean Default: true data-keyboard Closes the modal when escape key is pressed; set to false to disable.
show boolean Default: true data-show Shows the modal when initialized.
remote path Default: false data-remote Using the jQuery .load method, inject content into the modal body. If an href with a valid URL is added, it will load that content. An example of this is shown below − 
Click me

方法

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

Method Description Example
Options − .modal(options) Activates your content as a modal. Accepts an optional options object. 
$('#identifier').modal({
   keyboard: false
})
Toggle − .modal(‘toggle’) Manually toggles a modal. 
$('#identifier').modal('toggle')
Show − .modal(‘show’) Manually opens a modal. 
$('#identifier').modal('show')
Hide − .modal(‘hide’) Manually hides a modal. 
$('#identifier').modal('hide')

例

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

现场演示
Example of using methods of Modal Plugin

只需单击Esc按钮，模态窗口就会退出。

大事记

下表列出了要与模式一起使用的事件。这些事件可用于挂钩函数。

Event Description Example
show.bs.modal Fired after the show method is called. 
$('#identifier').on('show.bs.modal', function () {
   // do something…
})
shown.bs.modal Fired when the modal has been made visible to the user (will wait for CSS transitions to complete). 
$('#identifier').on('shown.bs.modal', function () {
   // do something…
})
hide.bs.modal Fired when the hide instance method has been called. 
$('#identifier').on('hide.bs.modal', function () {
   // do something…
})
hidden.bs.modal Fired when the modal has finished being hidden from the user. 
$('#identifier').on('hidden.bs.modal', function () {
   // do something…
})

例

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

现场演示
Example of using events of Modal Plugin

从上面的屏幕中可以看到，如果单击“关闭”按钮，即“隐藏事件”，则会显示警报消息。