bootstrap弹窗、弹出层、modal

引入bootstrap的js文件    如下div代码

<div class="modal fade" id="myModal2" style="background-color: #D5D5D5;font-size: .4cm;width: 350px;height: 300px;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content">
<div style="margin-top: 20px;margin-left: 10px;">设置管理密码</div>
<div>
<div style="margin-left: 22px;margin-top: 30px;">
输入旧密码<input type="password" id='pswds' placeholder="请输入旧密码" autocomplete="off" style="width: 166px;height:30px;border:1px solid transparent;border-radius: 8px;margin-left: 10px;"/>
</div>
<div style="margin-left: 22px;margin-top: 10px;">
输入新密码<input type="password" id='pswds1' placeholder="请输入密码" autocomplete="off" style="width: 166px;height:30px;border:1px solid transparent;border-radius: 8px;margin-left: 10px;"/>
</div>
<div style="margin-left: 10px;margin-top: 10px;">
再次输入密码<input type="password" id='pswds2' placeholder="请再次输入密码" autocomplete="off" style="width: 166px;height:30px;border:1px solid transparent;border-radius: 8px;margin-left: 10px;"/>
</div>
</div>
<div style="clear: both;"></div>
<div style="width: 100%;margin-top: 20px;" align="center">
<input type="button" id="b1" value="登&nbsp;&nbsp;路" onmouseout="seout('b1');" onmouseover="seover('b1');" onclick="save2();" style="background-color:#1C86EE;width:88px;height: 38px;color: white;padding-left: 0px;border: 1px solid transparent;outline: none;border-radius: 6px;"/>
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" id="b2" value="取&nbsp;&nbsp;消" onmouseout="seout('b2');" onmouseover="seover('b2');" onclick="myModalClo2();" style="background-color:#1C86EE;width:88px;height: 38px;color: white;padding-left: 0px;border: 1px solid transparent;outline: none;border-radius: 6px;"/>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
  $('#myModal3').modal('show');
$('#myModal3').modal('hide');

开始关闭触发事件

        $('#myModal').on('hide.bs.modal', function () {
// 执行一些动作...
$("#myModal").css("pointer-events","none");
}) $('#myModal').on('show.bs.modal', function () {
// 执行一些动作...
$("#myModal").css("pointer-events","auto");
})

防止点击其他地方关闭弹窗问题

加上如下标签即可

data-backdrop="static"

bootstrap弹窗、弹出层、modal的更多相关文章

  1. bootstrap 解决弹出窗口(modal) 常见问题

    无法使用键盘esc关闭窗口方法: 首先在modal容器的div中增加属性tabindex="-1",其次设置键盘ESC属性keyboard为true: 方法1:使用js打开窗口时 ...

  2. 关于bootstrap的modal弹出层嵌套子Modal所引发的血案(转)

    原文地址 http://blog.csdn.net/liuxiaogangqq/article/details/51821359 bootstrap的弹出层嵌套有一个问题 ,当子modal关闭时父的m ...

  3. Bootstrap Modal多个弹出层顺序

    Bootstrap Modal多个弹出层顺序与div的顺序关联.后来者居上:即div靠后的modal层弹出的时候会在上层. 比如上图所示,模态框2弹出的时候会在模态框1上面.

  4. bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

    答案来自老外http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field $( ...

  5. bootstrap弹出层效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  6. layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案

    layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...

  7. layer弹出层不居中解决方案,仅显示遮罩,没有弹窗

    问题:项目中layer询问层的弹窗仅显示遮罩层,并不显示弹窗…… 原因:图片太多将layer弹窗挤出屏幕下方,看不见了…… 解决方案:让layer的弹出层居中显示 一.问题描述 用layer做操作结果 ...

  8. bootstrap弹出层嵌套弹出层后文本框不能获得焦点输入

    如图上 我从页面打开一个bootstrap弹出层 然后又在 bootstrap弹出层的基础上打开一个layui的弹出层  打开后发现文本域获取不到焦点不能输入内容 而该弹出层显示的层级体现出来了 按钮 ...

  9. Bootstrap模态弹出框

    前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...

随机推荐

  1. 【UR #7】水题走四方

    题目描述 今天是世界水日,著名的水题资源专家蝈蝈大臣发起了水题走四方活动,向全世界发放成千上万的水题. 蝈蝈大臣是家里蹲大学的教授,当然不愿意出门发水题啦!所以他委托他的助手欧姆来发. 助手欧姆最近做 ...

  2. CentOS7 Zabbix3.4安装

    依赖于lnmp或者lamp环境: 1.下载源码包 # wget -O zabbix-3.4.2.tar.gz http://sourceforge.net/projects/zabbix/files/ ...

  3. jmeter+maven+jenkins自动化接口测试(上)

    代码已上传git(包括调试的jmx,jmeter相关文件等):https://gitlab.com/yinzhenzhi/jmeterandmaven 目的:现在很多人都在做自动化接口的平台,我也正在 ...

  4. 统计iis日志第一例的次数

    统计iis日志第一例(日期)出现的次数 IIS日志文件格式: #Software: Microsoft Internet Information Services 7.5 #Version: 1.0 ...

  5. 分布式监控系统开发【day38】:报警策略设计(二)

    一.策略和动作多对多的好处坏处 1.好处: 相同服务,相同策略的服务可以不用重复写好多次触发器 2.坏处: 1.策略A给小李和小罗发邮件2.策略B给小胡和小崔发邮件3.策略A是第三部发邮件4.策略B是 ...

  6. SHELL希尔排序

    /****************************************************************************** * Compilation: javac ...

  7. Karma (Test runner)

    Karma https://baike.baidu.com/item/%E7%BE%AF%E7%A3%A8/7618552?fromtitle=Karma&fromid=878453 1,意译 ...

  8. 尝试去读SQLMAP源码(一)

    本人python 小菜比 一枚.拜读业界典范~~ 阅读sqlmap 的版本是1.1.6,目前应该是最新版. sqlmap.py 脚本中 72~83 def modulePath(): "&q ...

  9. ES7 and ES8 特性

    ES7 特性:1.Array.prototype.includes let arr = ['react', 'angular', 'vue'] // Correct if (arr.includes( ...

  10. 简易解说拉格朗日对偶(Lagrange duality)

    引言:尝试用最简单易懂的描述解释清楚机器学习中会用到的拉格朗日对偶性知识,非科班出身,如有数学专业博友,望多提意见! 1.原始问题 假设是定义在上的连续可微函数(为什么要求连续可微呢,后面再说,这里不 ...