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 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
随机推荐
- Spring Boot程序获取tomcat启动端口
package com.geostar.geostack.git_branch_manager.config; import org.springframework.beans.factory.ann ...
- Linux查看用户登录信息-last
last命令: last命令用于显示用户最近登录信息.单独执行last命令,将读取 /var/log/wtmp 文件,并将给该文件的内容记录的登入系统的用户名单全部显示出来. 语法: last (选项 ...
- [ML]机器学习书单
https://anvaka.github.io/greview/hands-on-ml/1/
- macOS Mojave待机耗电大
这很有可能是待机时依然链接网络导致的.如果不需要待机时链接网络可以执行 sudo pmset -a tcpkeepalive 0 恢复则执行 sudo pmset -a tcpkeepalive 1
- pycharm pip安装包
第一种方式为命令行模式,在pycharm界面按alt+F12调出命令行窗口,在窗口内输入pip install matplotlib回车即可,如图1所示 方法二:使用菜单项File——settings ...
- StringJdbc :jdbcTemplate
Spring框架对Jdbc进行了封装 提供了一个JDBCTemplated对象简化Jdbc开发 步骤 1 导包 2 创建JDBCTemplate 对象 依赖于DataSource 3 调用JDBCTe ...
- 存在多个 AJAX 任务
实现的效果: 这两个Ajax任务可同时实现,也可单独实现. 标准的函数: var xmlhttp; function loadXMLDoc(url,ufunc){ if(window.XMLHttpR ...
- busybox(三)最小根文件系统
目录 busybox(三)最小根文件系统 引入 构建终端 构造inittab 配置应用程序 构建C库 制作映像文件yaffs title: busybox(三)最小根文件系统 tag: arm dat ...
- Entity Framework入门教程(10)---离线场景保存和删除实体/实体图集
离线场景保存和删除实体/实体图集 这一节的内容是在离线场景中保存实体和实体图集 在离线场景中,当我们保存一个离线的实体图集或一个单独的离线实体时,我们需要做两件事.首先,我们要把实体附加到新的上下文中 ...
- MongoDB实战性能优化
1. 性能优化分类 mongodb性能优化分为软件层面和操作系统层面. 软件层面,一般通过修改mongodb软件配置参数来达到,这个需要非常熟悉mongodb里面的各种配置参数: 而操作系统层面,相对 ...