BootStrapJS——modal弹出框

学习参考视频https://ninghao.net/video/1615

1.对话框 - Modal

需要bootstrap的CSS文件引入，以及jQuery的js包

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>弹窗测试</title>
 6     <link rel="stylesheet" href="css/bootstrap.min.css">
 7     <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
 8 </head>
 9 <body>
10     <div class="container">
11         <p class="alert alert-info">
12             Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：<br>
13             ☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮<br>
14             ☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容<br>
15             ☑ 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮</p>
16     </div>
17     <div class="modal in" style="display: block">
18         <!-- .modal-lg 为大弹出框；.model-sm为小弹出框 -->
19         <div class="modal-dialog model-lg">
20             <div class="modal-content">
21                 <!-- modal头部 -->
22                 <div class="modal-header">
23                     <button class="close">&times;</button>
24                     <h4>用户登录</h4>
25                 </div>
26                 <!-- modal主体 -->
27                 <div class="modal-body">
28                     <p>用户登录的表单</p>
29                 </div>
30                 <!-- modal底部 -->
31                 <div class="modal-footer">
32                     <button class="btn btn-primary">登录</button>
33                 </div>
34             </div>
35         </div>
36     </div>
37     <div class="modal-backdrop in"></div>
38 </body>
39 </html>

View Code

2.打开与关闭对话框

去掉modal in上的in，及后面的style

去掉下方的modal-backdrop的div

添加id data-toggle、data-target data-dismiss

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>弹窗测试</title>
 6     <link rel="stylesheet" href="css/bootstrap.min.css">
 7     <!-- <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
 8     <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 9     <script type="text/javascript" src="js/bootstrap.js"></script>
10 </head>
11 <body>
12     <div class="container">
13         <a href="" data-toggle="modal" data-target="#login-modal">登录</a>
14         <p class="alert alert-info">
15             Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：<br>
16             ☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮<br>
17             ☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容<br>
18             ☑ 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮</p>
19     </div>
20     <div class="modal fade" id="login-modal">
21     <!-- <div class="modal in" style="display: block">      -->
22         <!-- .modal-lg 为大弹出框；.model-sm为小弹出框 -->
23         <!-- fade为窗口加载效果 -->
24         <div class="modal-dialog model-lg">
25             <div class="modal-content">
26                 <!-- modal头部 -->
27                 <div class="modal-header">
28                     <button class="close" data-dismiss="modal">&times;</button>
29                     <!-- dissmiss点击消失 -->
30                     <h4>用户登录</h4>
31                 </div>
32                 <!-- modal主体 -->
33                 <div class="modal-body">
34                     <p>用户登录的表单</p>
35                 </div>
36                 <!-- modal底部 -->
37                 <div class="modal-footer">
38                     <button class="btn btn-primary">登录</button>
39                 </div>
40             </div>
41         </div>
42     </div>
43     <!-- <div class="modal-backdrop in"></div> -->
44
45 </body>
46 </html>

View Code

（注：中间出现错误，后来发现是bootstrap的js包未引入，只引入了bootstrap的Css包，醉心ing）

3.tabindex 属性

设置tab键点击属性　点击ESC退出　tabindex="-1"

4.对话框的选项

可以通过Js或者data相关，去除对话框黑色背景、ESC键效果去除等

（1）data

（2）Javascript

删除data-backdrop

添加js脚本

可以实现同data-backdrop="false"相同的效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>弹窗测试</title>
 6     <link rel="stylesheet" href="css/bootstrap.min.css">
 7     <!-- <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
 8     <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 9     <script type="text/javascript" src="js/bootstrap.js"></script>
10 </head>
11 <body>
12     <div class="container">
13         <a href="" data-toggle="modal" data-target="#login-modal">登录</a>
14         <p class="alert alert-info">
15             Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：<br>
16             ☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮<br>
17             ☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容<br>
18             ☑ 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮</p>
19         <button class="btn btn-primary">try</button>
20     </div>
21     <div class="modal fade" id="login-modal" tabindex="-1">
22     <!-- data-backdrop="false"去除黑色背景 -->
23     <!-- tabindex="-1"tab键锁定在当前层，可ESC键退出 -->
24     <!-- <div class="modal in" style="display: block">      -->
25         <!-- .modal-lg 为大弹出框；.model-sm为小弹出框 -->
26         <!-- fade为窗口加载效果 -->
27         <div class="modal-dialog model-lg">
28             <div class="modal-content">
29                 <!-- modal头部 -->
30                 <div class="modal-header">
31                     <button class="close" data-dismiss="modal">&times;</button>
32                     <!-- dissmiss点击消失 -->
33                     <h4>用户登录</h4>
34                 </div>
35                 <!-- modal主体 -->
36                 <div class="modal-body">
37                     <p>用户登录的表单</p>
38                 </div>
39                 <!-- modal底部 -->
40                 <div class="modal-footer">
41                     <button class="btn btn-primary">登录</button>
42                 </div>
43             </div>
44         </div>
45     </div>
46     <!-- <div class="modal-backdrop in"></div> -->
47     <script>
48         // 使用对话框的id(login-modal)进行定位,在调用modal方法，
49         // 把对象交给方法，对象里面可以是对话框的选项或者是值
50         // show、backdrop、keyboard、remote
51         $(function(){
52             $('#login-modal').modal({
53                 show:false,
54                 backdrop:false
55             });
56         });
57     </script>
58 </body>
59 </html>

View Code

5.对话框的 remote 选项

remote 可以将其他页面的效果直接载入到modal中（bootstrapjs使用jQuery的load方法），（同源规则）

HTML可以为modal-content里的所有内容，包括modal-header、modal-body、modal-footer

具体效果方法见https://ninghao.net/video/1619

（注：需要web服务器，有跨域）

data-remote也可以实现
6.modal 方法

7.对话框的事件

转载于:https://www.cnblogs.com/Shinea_SYR/p/7788297.html

BootStrapJS——modal弹出框相关推荐

bootstrap中modal弹出框的使用
modal按钮位置安放: <button class="btn btn-primary" onclick="edit()" data-toggle=&qu ...
bootstrap获取弹框数据_Bootstrap模态弹出框的实例教程
前面的话在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
modal vue 关闭_Vue弹出框的优雅实践
引言页面引用弹出框组件是经常碰见的需求,如果强行将弹出框组件放入到页面中,虽然功能上奏效但没有实现组件与页面间的解耦,非常不利于后期的维护和功能的扩展.下面举个例子来说明一下这种做法的弊端. @cl ...
ant-design在 vue 抽屉（drawer）里面嵌套弹出框（modal）出现蒙层遮挡弹框问题
ant-design在 vue 抽屉(drawer)里面嵌套弹出框(modal)出现蒙层遮挡弹框问题有时候会遇到这种情况,先打开抽屉,然后再抽屉里打开模态窗,出现模态窗被抽屉的的蒙层遮挡问题: 可 ...
php ajax弹出框传值,PHP_Yii2.0 模态弹出框+ajax提交表单，如题我们使用模态弹出框+ajax - phpStudy...
Yii2.0 模态弹出框+ajax提交表单如题我们使用模态弹出框+ajax提交表单首先我们把index视图的create按钮添加data-toggle 和 data-target. 代码如下: ...
使用easeui dialog弹出框中使用CKeditor多次加载后无法编辑问题
问题呈现:弹出框页面 <tr class="addtr"><th>内容</th><td><!-- <textarea r ...
Yii2.0 模态弹出框+ajax提交表单
如题我们使用模态弹出框+ajax提交表单首先我们把index视图的create按钮添加data-toggle 和 data-target. 代码如下: <?php echo Html::a( ...
[js]uploadify结合jqueryUI弹出框上传，js中的冒出的bug，又被ie坑了
引言最近在一个项目中,在用户列表中需要对给没有签名样本的个别用户上传签名的样本,就想到博客园中上传图片使用弹出框方式,博客园具体怎么实现的不知道,只是如果自己来弄,想到两个插件的结合使用,在弹出框中 ...
easyui js解析字符串_EasyUI Dialog弹出框+JS执行字符串
虽然写得不是很全面,但这是项目中经常用到的 Dialog弹出框 Div标签 Dialog内容 iconCls:图标 closed:默认关闭 modal:模态框 JS代码 function openDi ...

BootStrapJS——modal弹出框

BootStrapJS——modal弹出框相关推荐

最新文章

热门文章