弹出窗口/拦截页效果实现(div)
来源:互联网 发布:windows下wep破解 编辑:程序博客网 时间:2024/05/21 03:24
我们知道,想要在一个页面弹出一个自定义(非系统)窗口,那么window.open()方法是不二的选择,也好像是唯一的选择!
但是,我们也知道,大部分情况下这个方法会被浏览器阻止!
其实,浏览器的阻止的原理是:页面加载过程中弹出窗口就会被阻止,页面加载完成,通过用户点击事件,那么就不会被阻止,简而言之,用户主动点击(或者其他键盘监听事件等)弹出,被动加载就会被阻止。
有时候,我们有这样的需求,即加载出来的页面就有弹出窗口,用户浏览完可以点击关闭、或者定时关闭,这个时候window.open()就显得力不从心了,怎么办?
我们自己可以布局一个div,通过设计样式,在外观看来像是一个窗口!
其实,页面加载完成之后就是一个页面,我们设计的这个窗口是层叠在其他div之上的!
明白了原理之后,那么接下来就是设计!
我们可以在body中定义一个div:
<div class="intercept" id="intercept" style="display:none;"></div>
想要展现的内容放在这个div中!
接下来,在body的上面定义样式:
<style type="text/css">
.intercept {width: 900px;height: 500px; background: black; position: absolute;left: 50%;top: 50%;margin: -250px 0 0 -475px;z-index:99;}
</style>
其中background: url(imageUrl);背景可以设置图片、颜色等, position: absolute;必须有且不能变,margin是外边距,自己可以调整,z-index是层叠效果,数字越大越在上面,一般为正就好。
我们可以在JavaScript脚本中写下面的一句,或者为下面的show方法添加到点击事件或者其他自定义的事件当中即可!
不能忘了show方法是jQuery的一个方法,我们需要引用一下!
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("#intercept").show();
</script >
定时关闭我们可以这样写(先弹出,3秒后关闭):
<script type="text/javascript">
setTimeout(function(){
$("#intercept").hide();
},3000);
$("#intercept").show();
</script >
到此就算完成了,那么具体样式还需要自己设计!
- 弹出窗口/拦截页效果实现(div)
- DIV实现弹出窗口
- JavaScript弹出窗口DIV层效果代码
- JavaScript弹出窗口DIV层效果代码 [
- JAVASCRIPT弹出窗口DIV层效果代码
- jquery实现弹出窗口效果
- Jquery实现弹出窗口效果
- js实现右下角窗口弹出窗口效果
- jQuery实现弹出居、右下角、左下角窗口效果(一)
- jQuery实现弹出居、右下角、左下角窗口效果(二)
- 使用jquery实现弹出窗口效果(居中、左下角、右下角)
- 用层(DIV)来实现弹出窗口
- 【转】用DIV实现弹出窗口
- ASP.NET弹出窗口Div实现
- DIV+IFrame实现页面弹出窗口
- Jquery+div+css实现弹出登录窗口
- 用div实现弹出框效果
- 使用jQuery实现DIV弹出效果
- Android修改分区格式为F2FS
- 自动类型转换和强制类型转换
- 使用Retrofit+RxJava实现带进度下载文件
- stl下string的用法之取路劲和截断字符
- 我的学习记录62
- 弹出窗口/拦截页效果实现(div)
- vuejs
- 项目导入Eclipse中出现中文乱码--解决方案
- IOS_UI 界面九宫格算法
- 产品经理内功修炼——设计原则
- 530 Login incorrect. Login failed.
- Android理解:显式和隐式Intent
- Oracle 使用字符串作为查询集合时,rownum的使用
- 基于深度学习框架的火灾识别报警平台搭建----OpenCV3.1.0读取dav视频数据出错