Bootstrap3 模态对话框的调用方式

模态对话框的调用方式

可以通过 data 属性或 JavaScript，让模态框动态显示或隐藏。Bootstrap会为<body>元素添加.modal-open类来覆盖页面默认的滚动行为，并且还会自动生成一个.modal-backdrop元素，用于在模态框的外面提供一个可点击区域，点击该区域，就会关闭模态框。

1、data属性调用

使用 data 属性调用方式，无需编写 JavaScript 代码就可激活模态框。使用 data 属性调用时，要给触发模态框打开的元素设置两个属性，一个是 data-toggle 属性，另一个是 data-target 属性。

data-toggle 属性定义要触发的插件类型，对于模态对话框，它的值必须设置为 modal；data-target 属性定义触发对象，它的值是一个选择器，该选择器指向要显示或隐藏的模态框对象。

如果触发元素为按钮或其他元素，则要通过data-target 属性定义触发对象，并将 data-target 属性的值设置为模态对话框的 id 值。如，以下代码表示点击按钮会打开 id="myModal" 的模态对话框：


<button data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
...
</div>

如果触发元素为超链接，则既可以使用 data-target 属性，也可以使用 href 属性来定义触发对象。但为了统一，建议还是使用 data-target 属性。如：


<a data-toggle="modal" href="#myModal">Launch demo modal</a>

<a data-toggle="modal" data-target="#myModal">Launch demo modal</a>

2、JavaScript调用

使用JavaScript调用模态对话框非常简单，只需一行JavaScript代码，即通过元素的 id调用模态框：

$('#myModal').modal()

如果使用JavaScript调用，就不必为按钮添加 data-toggle 和 data-target 属性。不过，为了便于通过 jQuery 获取按钮点击事件，最好为它添加 id 属性。如：

<button id="#btnModal">Launch demo modal</button>

如果希望在用户点击 id="btnModal" 的按钮时，调用 id="myModal" 的模态对话框。代码可以这样写：

$(function() {
$("#btnModal").click(function(){
$('#myModal').modal();
});
});

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap3 模态对话框的调用方式相关推荐

Bootstrap3 模态对话框的事件
模态对话框的事件 Bootstrap为模态对话框插件提供了 5 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应.这些事件及含义见表 4‑2. 表 4‑2 modal插件的事件及含义事 ...
Bootstrap3 模态对话框的方法
模态对话框的方法 1..modal(options) 使用一个可选的对象参数 options调用模态对话框.如: $('#myModal').modal({ backdrop: false, ...
Bootstrap3 轮番插件的调用方式
轮番插件的调用方式 1.JavaScript调用 JavaScript调用轮番其实很简单,只需在脚本中调用 carousel() 方法即可.格式为: $('.carousel').carousel() ...
Bootstrap3 折叠插件的调用方式
折叠插件的调用方式折叠插件的结构相对复杂,但调用比较简单,可以通过data属性调用,也可以通过JavaScript调用. 1.data 属性调用要激活折叠插件的激活行为,首先为标题部分的链接定义 ...
Bootstrap3 模态对话框的选项
模态对话框的选项 Bootstrap为模态对话框提供了 4 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 4‑1: 表 4‑1 modal插件的选项名称类型默 ...
Bootstrap3 模态对话框的尺寸
模态对话框的尺寸 Bootstrap为模态框提供了两个尺寸类 .modal-lg和.modal-sm,可以为.modal-dialog增加一个样式类,来调整模态框的尺寸. 如果模态框中的内容比较多,你 ...
模态对话框和非模态对话框的消息循环分析
1.非模态对话框和父窗口共享当前线程的消息循环 2.模态对话框新建一个新的消息循环,并由当前消息循环派发消息,而父窗口.模态对话框屏蔽了用户对它父窗口的操作,但是不是在消息循环里面屏蔽,所以给父窗口发 ...
模态对话框和非模态对话框区别
按工作方式不同,可将对话框分成两类: ??模式对话框(modal dialog box模态对话框):在关闭模式对话框之前,程序不能进行其他工作(如一般的"打开文件"对话框) ? ...
模态对话框和非模态对话框的区别
模态对话框和非模态对话框的区别假设对话框类名为:CTestDlg 1,如果是模态对话框: CTestDlg ctd;//创建该对话框对像 ctd.DoModale(); 2,如果是非模态的: C ...

Bootstrap3 模态对话框的调用方式

模态对话框的调用方式

Bootstrap3 模态对话框的调用方式相关推荐

最新文章

热门文章