页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理
实现思路:
1、需要有一个层将body遮住,放在body上方。
2、修改body的overflow属性值为:hidden
废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie
遮罩层的样式代码,红色部分是关键的部分
position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60);
z-index: 1002; left: 0px; display:none;
opacity:0.5; -moz-opacity:0.5;
}
网页部分的代码
<div class="container" style="height:2000px;">
<div style="height:1000px;"></div>
<a href="javascript:;" onclick="showMask()" >点我显示遮罩层</a><br />
</div>
<div id="cover" class="cover"></div>
</body>
js部分的代码
$('body').css("overflow","hidden")
$("#cover").show();
}
页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理的更多相关文章
- Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框
父页面bootstrap模态框: <div class="modal fade" id="myModal" tabindex="-1" ...
- bootstrap模态框手动关闭遮盖层不消失
模态框中 加载了一个子页面 子页面中调教表单之后想根据执行结果手动关闭模态框,最初尝试了以下几种方案: 1.$("#myModal").modal('hide');//模态框关闭 ...
- bootstrap 模态框中弹出层 input不能获得焦点且不可编辑
bootstrap 模态框中弹出层 input不能获得焦点且不可编辑 问题描述:bs框架支持一层model层的情况下,在模态框中弹出了自定义的弹出层.发现自定义弹出层的输入框不能获得焦点且不可编辑. ...
- js实现页面遮罩层,并且阻止页面body滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Angularjs 实现页面遮罩层功能
实现效果: 1.loading指令: "use strict" /** * Created by yw on 2015/9/27. * user defined loading d ...
- 基于bootstrap模态框、fakeLoader实现全局遮罩层
一.fakeLoader.js介绍 fakeLoader.js 是轻量级的 jQuery 插件,帮助你创建动态的全屏加载掩饰微调效果,模拟页面预加载的效果. 插件下载地址:https://github ...
- (转)解决bootstrap 模态框的页面抖动
使用bootstrap时,往往会出现页面抖动的效果,使得用户体验十分不友好. Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置bod ...
- Bootstrap3-技巧之解决Bootstrap模态框切换时页面抖动 or页面滚动条
Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px; ...
- 解决Bootstrap模态框切换时页面抖动 or页面滚动条
Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px; ...
随机推荐
- tomcat 无法加载js和css 等静态文件的问题
前段时间做了个网站,在本地tomcat测试都没有问题,但是部署到阿里云上之后,系统样式全没了.jsp等动态页面访问正常. 打开浏览器监控发现所有的css 和js 文件返回都是404 .直接访问单个的c ...
- Spring中ApplicationContext对事件的支持
Spring中ApplicationContext对事件的支持 ApplicationContext具有发布事件的能力.这是因为该接口继承了ApplicationEventPublisher接口. ...
- struts2基础篇(1)
一.Struts2简介Struts2以WebWork优秀的设计思想为核心,吸收了Struts1的部分优点,建立了一个基于WebWork和Struts1的MVC框架. 二.搭建Struts2开发环境2. ...
- jquery ajax 提交 FormData
$('form').submit(function(){ var formdata=new FormData(this); $.ajax({ type:'POST', url:'/url/path', ...
- Java并发编程核心方法与框架-Fork-Join分治编程(一)
在JDK1.7版本中提供了Fork-Join并行执行任务框架,它的主要作用是把大任务分割成若干个小任务,再对每个小任务得到的结果进行汇总,这种开发方法也叫做分治编程,可以极大地利用CPU资源,提高任务 ...
- XMLHttpRequestUtil
//XMLHttpRequest类 function XMLHTTPRequestUtil() { this.Instance = null; this.GetXMLHttpRequest = fun ...
- QQ空间HD(1)-UIPopoverController基本使用
UIPopoverController 是iPad的专属API ViewController.m #import "ViewController.h" #import " ...
- 怎么搭建Web Api
1.通常我们有个web 让后可以有个web api 提供接口2.通常我们分别建两个项目 web api 依赖web的来进行访问(说到底是依赖是IIS)3.我们先建个SmallCode.Test.Web ...
- jqueryui / accordion的用法记录
jqueryui 的 widget 中包含了基本上我们都需要的ui组件, 除了那个unslider. 参考地址是: www.jqueryui.com. 要能够看懂/并使用/ 完全掌握的话, 就要使用其 ...
- [译]git revert
git revert git revert用来撤销一个已经提交了的快照. 但不是从项目历史中移除这个commit, 而是生成一个新的commit, 老的commit还是保留在历史项目里面的. 这样做的 ...