BootStrapJS——modal弹出框

最新推荐文章于 2024-02-05 02:38:00 发布
最新推荐文章于 2024-02-05 02:38:00 发布
阅读量165 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Shinea_SYR/p/7788297.html
版权

 

学习参考视频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

weixin_30794499
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap modal弹出框
u010995263的专栏
08-17 1504
最近在web开发过程中需要做一个弹出框，通过看导师的代码和上网查阅了相关资料，最后完成了这个弹出框。 具体实现功能为，当我点击日志按钮时，会出现一个弹出框，显示该日志的内容，如果点击弹出框的关闭或者右上方的退出按钮，该弹出框就会退出。 html代码，这是标准格式： js代码：这是实现的核心部分： var SAVE_DATA = { //JSON格式的数组 'logpa
bootstrap——js插件（一、modal）
zaichuanguanshui的专栏
01-19 974
1、modal基本用法.modal.modal-dialog.modal-content .modal-content里面包括.modal-header.modal-body.modal-footer1）创建一个button，点击之后可以弹出一个modal有两种方法绑定事件 一种是：添加属性.data-toggle="modal"和.data-target="#modalId" 第二种是：添加Js
Bootstrap扩展Modal弹窗
weixin_30306905的博客
06-12 101
BootstrapModal插件的模态弹窗是个常用的插件，但是实际工作中，它可能还不能完全满足我们的需求。 一般来说我们经常使用两种弹窗：一种是Info弹窗（信息确认框，带有“确认”和“取 消”按钮），一种是Form弹窗（表单提交框，但“提交”按钮通常是利用Ajax技术提交）。 Bootstrap所有的JS插件的开发步骤，总共分5步： 分别是： 1、定义立即调用的函数表达式 2、声明组件类函...
bootstrap模态框自动弹出与手动弹出详解
热门推荐
黎鉴洪的博客
04-22 3万+
bootstrap模态框自动弹出功能与js 无关，手动弹出则需要js去控制 两者的区别：自动弹出需要在按钮多设置一个data-target属性target到模态框的id , JS控制弹出的话需要在按钮加个click事件$("#Mymodal").modal("show") 1.bootstrap模态框自动弹出演示 bootstrap 弹出模态框
BootStrap学习笔记JS插件（一）--模态弹出框
最新发布
男神的专栏
02-05 828
2、data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。，一般使用“modal-header”表示，主要包括标题和关闭按钮。，一般使用“modal-footer”表示，主要放置操作按钮。.modal-lg 为大弹出框；试验在触发按钮或弹出modal上设置，发现都可以使用。，一般使用“modal-body”表示，弹出框的主要内容。
Bootstrap点击弹出层用户登录窗口模板
06-08
在登录窗口模板中，我们可以期待看到一些关键的Bootstrap组件，如模态（Modal）——这是一个可以弹出的对话框，用于显示额外的信息或进行特定操作，比如用户登录。 模态通常由HTML元素、JavaScript事件处理和必要的...
bootstrap源码阅读（一）——modal原理
Daisy花园
12-12 6391
虽然bootstrap主要是css，但是我还是从bootstrap的js入手进行学习 ＃检查jquery，以及jquery版本/*typeof检查是否存在jquery对象*/ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript requires jQuery') } /*检查jquery版本
Bootstrap——可拖动模态框(Model)
aiyizou6070的博客
08-07 1320
还是上一个小项目，o(╥﹏╥)o，要实现点击一个div或者button或者一个东西然后可以弹出一个浮在最上面的弹框。网上找了找，发现Bootstrap的Model弹出框可以实现该功能，因此学习了一下，实现了基本弹框功能（可拖动）。 代码如下： <!DOCTYPE html> <html> <head> <me...
asp.net弹出框Jq插件用法模板
05-30
在ASP.NET开发中，我们经常...常见的JQuery弹出框插件有jQuery UI Dialog、Bootstrap Modal等。假设我们使用的是jQuery UI Dialog，那么我们需要在HTML页面头部引入jQuery核心库和jQuery UI CSS及JS文件： ```html ...
Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框
昊虹AI笔记
10-25 3198
Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框
js点击弹窗练习(modal/模态框)
大龄python业余爱好者锅大虾
07-16 3908
要求： 点击按钮，弹出窗口，点击关闭按钮关闭窗口 要点： 1、使用按钮的click方法触发js函数 2、js函数中对隐藏的modal设置dispaly为blcok 3、点击关闭按钮，通过click方法触发js函数 4、js函数中对modal设置display为none 示例代码1： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>modal练习</title
原生JS实现的登陆框拖曳效果
HelloByte的博客
06-27 155
JS,HTML代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style02.css" /> </head> <body> <header> <span id
原生JS封装Modal弹框
qq_32021429的博客
04-12 2658
使用原生JS(es5)封装一个属于自己的Modal弹框 效果图展示 主要代码 function Modal(options) { options = Object.assign({ title: '标题', backgroundColor: '#fff', // 背景颜色 mask: true, //是否显示遮罩层, content: '弹框内容', cancelText: '取消',//取消按钮文字 okText: '确认'
Bootstrap(JS插件库-模态弹出框)
圥儿
08-02 9655
Bootstrap(JS插件库) 标签（空格分隔）： Bootstrap 一、导入JavaScript插件 Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。 1、一次性导入： Bootstrap提...
AngularJS弹出框 $modal的使用
qq_一望损莓苔的博客
05-14 1万+
//HTML:注意在Chrome浏览器中会给input添加默认样式，影响到打钩的框出不来，主要是position和影响透明度的opacity&lt;script type="text/ng-template" id="noticeListModal.html"&gt; &lt;div class="modal-header"&gt; &lt;h3 class="modal-.
js 单击 弹出 页面 Model
Joe_elena的博客
08-14 2049
//效果  // model  &lt;%--Model框--%&gt; &lt;div class="modal" id="mymodal"&gt; &lt;div class="modal-dialog"&gt; &lt;div class="moda
JS弹出模态框内嵌其它网页
IT从业者
12-26 4934
JS弹出模态框内嵌其它网页
关于bootstrap的modal弹出层嵌套子Modal所引发的血案
iteye_20240的博客
07-04 890
bootstrap的弹出层嵌套有一个问题 ，当子modal关闭时父的modal也会自动关闭，这可能是bootstrap的一个问题，经过资料仔细查找，发现需要修改bootstrap.js的源码， 需要找到这一行 this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, thi...
Bootstrap模态弹出框详解与应用
--/.modal-->\n</body>\n```\n\n为了使模态弹出框正常工作，需要引入jQuery库（如`jquery.js`）以及Bootstrap的`bootstrap-transition.js`和`bootstrap-modal.js`文件。确保正确加载这些资源，才能使模态弹出框的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值