Bootstrap - Modal插件

上述代码的详细信息:

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

2、如果您查看上面的代码，您将看到在标记中，data-target ="＃myModal"是您要在页面上加载的模式的目标。此代码允许您在页面上创建多个模态，然后为每个模式设置不同的触发器。现在，要清楚，您不能同时加载多个模态，但您可以在不同时间加载的页面上创建许多模式。

3、在模态和减号中有两个要注意的类;

4、第一个是.modal，它只是将

的内容标识为模态。

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

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

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

8、

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

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

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

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

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

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

Options

有些选项可以通过数据属性或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

Methods

Here are some useful methods that can be used with 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

T以下示例演示了方法的用法:

Example of using methods of Modal Plugin
   Launch demo modal

                                                         ×                                                   This Modal title                                                   Press ESC button to exit.                                                      Close                                                   Submit changes                                          

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

Events

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

$('#identifier').on('show.bs.modal', function () {   // do something…})

$('#identifier').on('shown.bs.modal', function () {   // do something…})

$('#identifier').on('hide.bs.modal', function () {   // do something…})

$('#identifier').on('hidden.bs.modal', function () {   // do something…})

Example

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

Example of using events of Modal Plugin
   Launch demo modal                                                         ×                                                   This Modal title                                                   Click on close button to check Event functionality.                                                      Close                                                   Submit changes                                          

如上图所示，如果您点击关闭按钮即隐藏事件，则会显示警告信息.