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. 不同系统下的字长------typedef的意义

    int的字节长度是由CPU和操作系统编译器共同决定的, 一般情况下,主要是由操作系统决定,比如,你在64位AMD的机器上安装的是32位操作系统,那么,int默认是32位的:如果是64位操作系统,64位 ...

  2. eclipse报错 : One or more constraints have not been satisfied.

    当eclipse进行报错时,但是不影响运行时,这种错误一般是编译时的问题 进行修改3个地方,即可完成 一 :  进行修改这三个地方的配置文件,都改成你统一的jdk版本,和你用的Dynamic Web ...

  3. vue+webpack+vue-cli获取URL地址参数

    在没有使用webpack+vue router开发中,想要获取RUL传的参数地址,直接通过一个函数就可以获得. 比如在  www.test.com/test.html?sign=test  地址中,想 ...

  4. Android查看联系人简单记录

    简单实现打印联系人信息,可以作为插入联系人的基础和主要代码块,作为个人记录的小逻辑 package com.lgqrlchinese.contactstest; import android.Mani ...

  5. Hive SQL 分类

    题目: 请使用Hive SQL实现下面的题目. 下面是一张表名为user_buy_log的表,有三个字段,user(用户),grp(分组编号),time(购物时间). 需要将用户按照grp分组,对ti ...

  6. MapReduce-序列化(Writable)

    Hadoop 序列化特点 Java 的序列化是一个重量级序列化框架(Serializable),一个对象被序列化后,会附带很多额外的信息(各种校验信息,Header,继承体系等),不便于在网络中高效传 ...

  7. C#使用ServiceStack读写Redis

    通过C#第三方库向Redis存储数据遇到的几个问题 https://github.com/ServiceStack/ServiceStack.Redis 1.将对象转json字符串 JsonObjec ...

  8. CentOS 7 破解root密码

    破解root密码必须在本机上进行,如果使用SecureCRT  Xshell等远程工具修改是会出错的! A0 哥们儿,忘记密码了,怎么办??? A1.进入启动界面: A2. 按‘e’键进入编辑模式 A ...

  9. keras的网络结构与网络配置

    摘自: https://www.cnblogs.com/Anita9002/p/8136357.html Keras的网络配置

  10. main 及Scanner

    通过main方法的args数组可以从控制台获取一组字符串数据. 1.Scanner类用于扫描从控制台输入的数据,可以接收字符串和基本数据类型的数据. 2.Scanner类位于java.util.Sca ...