bootstrap弹窗、弹出层、modal
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="登 路" 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;"/>
<input type="button" id="b2" value="取 消" 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的更多相关文章
- bootstrap 解决弹出窗口(modal) 常见问题
无法使用键盘esc关闭窗口方法: 首先在modal容器的div中增加属性tabindex="-1",其次设置键盘ESC属性keyboard为true: 方法1:使用js打开窗口时 ...
- 关于bootstrap的modal弹出层嵌套子Modal所引发的血案(转)
原文地址 http://blog.csdn.net/liuxiaogangqq/article/details/51821359 bootstrap的弹出层嵌套有一个问题 ,当子modal关闭时父的m ...
- Bootstrap Modal多个弹出层顺序
Bootstrap Modal多个弹出层顺序与div的顺序关联.后来者居上:即div靠后的modal层弹出的时候会在上层. 比如上图所示,模态框2弹出的时候会在模态框1上面.
- bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
答案来自老外http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field $( ...
- bootstrap弹出层效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案
layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...
- layer弹出层不居中解决方案,仅显示遮罩,没有弹窗
问题:项目中layer询问层的弹窗仅显示遮罩层,并不显示弹窗…… 原因:图片太多将layer弹窗挤出屏幕下方,看不见了…… 解决方案:让layer的弹出层居中显示 一.问题描述 用layer做操作结果 ...
- bootstrap弹出层嵌套弹出层后文本框不能获得焦点输入
如图上 我从页面打开一个bootstrap弹出层 然后又在 bootstrap弹出层的基础上打开一个layui的弹出层 打开后发现文本域获取不到焦点不能输入内容 而该弹出层显示的层级体现出来了 按钮 ...
- Bootstrap模态弹出框
前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
随机推荐
- SVN Error:Error performing cleanup for
这个错误,是由于我误删了lib中的jar导致的 一 首先,下载 sqlite3 然后把sqlite3.exe 放到项目文件夹中的.svn文件夹. 如下: 二 接着运行cmd 转到.svn下 三 输入 ...
- ☆ [HNOI2012] 永无乡 「平衡树启发式合并」
题目类型:平衡树启发式合并 传送门:>Here< 题意:节点可以连边(不能断边),询问任意两个节点的连通性与一个连通块中排名第\(k\)的节点 解题思路 如果不需要询问排名,那么并查集即可 ...
- 10.3 Vue 路由系统
Vue 路由系统 简单示例 main.js import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...
- 如何学习FPGA
如何学习FPGA 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/k331922164/article/details/44626989 PS:笔者强 ...
- halcon+WinForm显示rgb图并灰度化
1.halcon代码,并导出成C# read_image (Demo, 'C:/Users/user/Pictures/demo.jpg') dev_display (Demo) rgb1_to_gr ...
- 微服务下的容器部署和管理平台Rancher
Rancher是什么 Rancher是一个开源的企业级容器管理平台.通过Rancher,企业再也不必自己使用一系列的开源软件去从头搭建容器服务平台.Rancher提供了在生产环境中使用的管理Docke ...
- 版本控制工具之git
git存储区域详解 命令快速总结 初始化 git init 当前文件夹初始化 代码提交 git add file/. 自动检测工作区修改的内容提交到暂存区 git status 查看当前文件夹工作区的 ...
- Django 数据库查询集合(双下划线连表操作)
Django是一款优秀的web框架,有着自己的ORM数据库模型.在项目中一直使用django数据库,写一篇文章专门记录一下数据库操作.略写django工程创建过程,详写查询过程.可以和sqlalche ...
- HTML(三)HTML属性
HTML 属性 属性: [class] 规定元素的一个或多个类 注意: 类不能以数字开头 class = "classA classB" // 多个类的写法 [id] 规定元素的唯 ...
- [Android] Android 锁屏实现与总结 (三)
上接: Android 锁屏实现与总结 (二) 系列文章链接如下: [Android] Android 锁屏实现与总结 (一) [Android] Android 锁屏实现与总结 (二) [Andro ...