jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例


Posted in jQuery onOctober 19, 2017

本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能。分享给大家供大家参考,具体如下:

弹出层:两种方式

一是打开网页就自动弹出层
二是点击弹出

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3water.com - jQuery简便实现遮罩层</title>
<meta charset="utf-8">
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0;
}
#main {
height:1800px;
padding-top:90px;
text-align:center;
}
#fullbg {
background-color:gray;
left:0;
opacity:0.8;
position:absolute;
top:0;
z-index:3;
filter:alpha(opacity=80);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
#dialog {
background-color:#fff;
border:5px solid rgba(0,0,0, 0.8);
height:400px;
left:50%;
margin:-200px 0 0 -200px;
padding:1px;
position:fixed !important; /* 浮动对话框 */
position:absolute;
top:50%;
width:400px;
z-index:5;
border-radius:5px;
display:none;
}
#dialog p {
margin:0 0 12px;
height:24px;
line-height:24px;
background:#CCCCCC;
}
#dialog p.close {
text-align:right;
padding-right:10px;
}
#dialog p.close a {
color:#fff;
text-decoration:none;
}
</style>
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
 showBg();
});
</script>
<script type="text/javascript">
//显示灰色 jQuery 遮罩层
function showBg() {
  var bh = $("body").height();
  var bw = $("body").width();
  $("#fullbg").css({
    height:bh,
    width:bw,
    display:"block"
  });
 $("#dialog").show();
}
//关闭灰色 jQuery 遮罩
function closeBg() {
$("#fullbg,#dialog").hide();
}
</script>
</head>
<body>
<div id="main"><a href="javascript:showBg();" rel="external nofollow" >点击这里查看效果</a>
<div id="fullbg"></div>
<div id="dialog">
  <p class="close"><a href="#" rel="external nofollow" onclick="closeBg();">关闭</a></p>
  <div>正在加载,请稍后....</div>
</div>
</div>
</body>
</html>

运行效果:

jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jquery实现拖拽添加元素功能
Dec 01 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 #jQuery
jquery实现图片跟随鼠标的实例
Oct 17 #jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 #jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 #jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 #jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 #jQuery
jQuery响应滚动条事件功能示例
Oct 14 #jQuery
You might like
解决php写入数据库乱码的问题
2019/09/17 PHP
非常好的js代码
2006/06/27 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
jquery选择器使用详解
2014/04/08 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
Javascript中神奇的this
2016/01/20 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
jsTree使用记录实例
2016/12/01 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
详解react-redux插件入门
2018/04/19 Javascript
简单的三步vuex入门
2018/05/20 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
Python中的列表知识点汇总
2015/04/14 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
在Python中处理XML的教程
2015/04/29 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
Python中django学习心得
2017/12/06 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
医生进修自我鉴定
2014/01/19 职场文书
高中军训感言200字
2014/02/23 职场文书
《姥姥的剪纸》教学反思
2014/02/25 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
python区块链实现简版工作量证明
2022/05/25 Python