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>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="http://keleyi.com/keleyi/pmedia/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();">点击这里查看效果</a>
<div id="fullbg"></div>
<div id="dialog"> <p class="close"><a href="#" οnclick="closeBg();">关闭</a></p> <div>正在加载，请稍后....</div>
</div>
</div>
</body>
</html>

jquery 打开网页自动弹出遮罩层或点击弹出遮罩层相关推荐

html点击弹出登录注册表单提交代码
介绍: html手机登录表单,手机注册表单,弹出表单,点击弹出弹窗. 用于用户登录点击登录跳出弹窗作用,代码逻辑基本上没啥问题,美化一下就可以线上使用网盘下载地址:点击登录弹窗代码.zip - 蓝奏 ...
打开网页自动弹出QQ对话框的实现办法
Ian今天偶然进入一个公司的企业网站,然后QQ聊天窗口这里马上就弹出与那个公司客服聊天的窗口.怀着好奇的心态,Ian分析了该公司的网站源码,发现了实现网页弹出qq对话框的原理与实现方法,相信此时此刻你 ...
打开网页自动下载php,打开网页自动弹出下载aidclient.php窗口解决方法
在使用浏览器打开网页的时刻,有时会自动弹出aidclient.php的下载窗口或者是aidclient.js的下载窗口,下载地址是w.cnzz.com/aidclient.php,不管是360浏览器. ...
html注释图案,jQuery图片点击弹出遮罩层标记注释特效
这是一款简单的.非常实用的jQuery图片点击弹出遮罩层标记注释特效. HTML html结构非常简单.使用一个portfolio作为wrapper,在里面可以添加多个portfolio_item. ...
html5鼠标点击弹出层,jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现 ...
u盘自动打开html,如何快速禁用U盘自动弹出(播放)功能无需手动关闭弹出窗口
如何快速禁用U盘自动弹出(播放)功能无需手动关闭弹出窗口发布时间:2013-08-26 17:04:27 作者:佚名我要评论移动硬盘分了N个区的时候需要手动一个一个的关掉自动播放窗口,真 ...
每次打开电脑浏览器首页的同时，还会一并弹出网页广告，而且有时还是不一样的解决办法
问题每次打开电脑浏览器首页的同时,还会一并弹出一个网页广告解决流程一开始搜索过CSDN,看大家的解决办法,以为是Chrome的快捷方式里被加了网址,但检查之后发现不是去修改注册表,发现并没有卵 ...
js弹出一段html,html js 弹出层
弹出层―到浏览器中央―背景变暗:前端思考请猛击我(我会弹到中间,同时背景变暗) 弹出层标题栏这里是弹出层内容,内容可以是文字.图片等,可以是iframe传进来,也可以用jQuery的load()传进 ...
基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览源码下载实现的代码. html代码: <input type=&quo ...
layui弹出层之layer.open弹出iframe窗口·
layui弹出层之layer.open弹出iframe窗口· layer.open弹出iframe窗口 [1]该功能为案例,弹出iframe窗口显示上传数据由于layui的弹出层每次执行layer. ...

jquery 打开网页自动弹出遮罩层或点击弹出遮罩层

jquery 打开网页自动弹出遮罩层或点击弹出遮罩层相关推荐

最新文章

热门文章