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. luogu P1744 采购特价商品

    实话说我本来想找SPFA的题,结果我硬生生的把这道题做成了Floyd 先来看题,我们会发现如果把他所给的变量都输入,那么会发现用Floyd的解法,输入占了main函数的一半长度... 题目分为两步走: ...

  2. 指针运算中的运算符:&和*

    这里&是取地址运算符,*是间接运算符. &a 的运算结果是一个指针,指针的类型是 a 的类型加个 *,指针所指向的类型是 a 的类型,指针所指向的地址嘛,那就是 a 的地址. *p 的 ...

  3. python dic字典使用

    #!/usr/bin/env python -*-''' 字典的基本组成及用法: dict={key:value} dict[key]=value 字典是无序的. key值是唯一属性,一对一,几个ke ...

  4. Python的虚拟环境

    Python自带env # 新建虚拟环境 python -m venv env_name # 激活虚拟环境 cd env_name cd Scripts activate # 退出虚拟环境 # 到达虚 ...

  5. JENKINS针对不同项目组对用户进行权限分配

    权限需求 因JENKINS上存有de(开发).te(测试).re(预发布)等三个不同环境的项目,同时因为项目需求,需要对不同的开发及测试人员配置不同的jenkins权限,即以项目为单位,对不同人员进行 ...

  6. Python 各种进制转换

    #coding=gbk var=input("请输入十六进制数:") b=bin(int(var,16)) print(b[2:]) 详细请参考python自带int函数.bin函 ...

  7. [再寄小读者之数学篇](2014-10-08 乘积型 Sobolev 不等式)

    $$\bex n\geq 2, 1\leq p<n\ra \sen{f}_{L^\frac{np}{n-p}(\bbR^n)} \leq C\prod_{k=1}^n \sen{\p_k f}_ ...

  8. 使用select为描述符设置超时

    int readable_timeo(int fd, int sec) { fd_set rset; struct timeval tv; FD_ZERO(&rset); FD_SET(fd, ...

  9. EffectiveC++ 第6章 继承与面向对象设计

    我根据自己的理解,对原文的精华部分进行了提炼,并在一些难以理解的地方加上了自己的"可能比较准确"的「翻译」. Chapter 6 继承与面向对象设计 Inheritance and ...

  10. Vue技术内幕 出去看看吧 榨干部分小细节

    vue\src\platforms\web\entry-runtime-with-compiler.js /** * Get outerHTML of elements, taking care * ...