兼容谷歌、火狐、IE7.0以上浏览器div+css实现的带有蒙版的半透明弹窗效果[xyytit]

时间:2021-10-15 14:08:55

兼容谷歌、火狐、IE7.0以上浏览器div+css实现的带有蒙版的半透明弹窗效果[xyytit]

整个页面变暗的蒙版效果,带有半透明边框的弹窗,用在网站里一定很酷。

最初见与奢饰品购物网站YMALL,后边研究了下,自己做了这个实例。

技术要点:css中几种透明样式的使用。不同的样式在不同的浏览器中的兼容性不同,所以需要采取组合使用才能兼容多个浏览器。详见:http://www.cnblogs.com/xyyt/p/3477156.html

示例代码:

 <!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></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
#Body{ z-index:1; display:block;height:1000px;}
#Cover{ z-index:999; position:fixed;_position:relative;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#88000000',endColorstr='#88000000');background-color:rgba(0, 0, 0, 0.5);background:#000;opacity:0.5;filter:alpha(opacity=50);height:100%;left:0;top:0;display:block;width:100%;}
#Pop{z-index:10000;position: fixed;_position: relative;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3Fffffff',endColorstr='#3Fffffff');background-color: rgba(255,255,255,0.3);font-family: 微软雅黑; padding:10px;left: 40%;top:40%;}
.btnClose {width: 16px;height: 16px;position: absolute;overflow: hidden;right: 20px;top: 20px;background: url(../Images/Goods/Model/btn-bg.png) -73px 0px;cursor: pointer;}
.popContent {width: 309px;height: 172px;overflow: hidden;padding-left: 33px;background: white;}
.popMain *{position:relative;}
.popContent dl {height: 79px;overflow: hidden;}
.popContent dt {padding-top: 18px;height: 28px;}
.popContent dd {margin-left:0px; margin-top:5px;}
.f_20 {font-size: 20px;color:Black;}
.f_18 {font-size: 16px;}
.f_14 {font-size: 14px; color:#444}
.f_bold{ font-weight:bold;}
.f_red{color: #9C2C2C;}
.popContent b a, .popContent b a:visited {display: block;width: 98px;height: 23px;overflow: hidden;text-decoration: none;background-color:Black;color:White;padding:5px;text-align:center;}
.btnGoToPay{width:118px;height:32px; background-color:Black; color:#ddd; border:2px solid #ccc; font-size:16px;font-weight:bold; margin-left:18px; cursor:pointer;}
.btnGoToBuy{width:92px;height:25px;margin-left:18px; cursor:pinter; color:#444;}
</style>
<script language="javascript" type="text/javascript">
function btnPop_onclick() {
var cover = "<div id='Cover' onclick='btnClose_onclick()'></div>";
$("body").append(cover);
var pop = "<div id='Pop'></div>";
$("body").append(pop);
$("#Pop").append("<div class='btnClose' onclick='return btnClose_onclick()'>X</div>"
+ "<div class=' popMain'>"
+ "<div class='popContent'>"
+ "<dl class='f_black'>"
+ "<dt class='f_20'>商品已成功添加到购物车!</dt>"
+ "<dd class='f_14' >你的购物袋*有<span href='#' class='f_red'>1</span> 件宝贝,合计:<span class='f_red f_16 f_bold'>¥173.00</span></dd></dl>"
+ "<div style='margin-top:22px;'>"
+ "<input class='btnGoToPay' type='button' value='立即结算' />"
+ "<input class='btnGoToBuy' type='button' value='继续购物'/>"
+ "</div></div></div>");
}
function btnClose_onclick() {
$("#Cover").remove();
$("#Pop").remove();
}
</script>
</head>
<body>
<!--主体层-->
<h1>点击任意图片弹出弹窗,点击弹窗图片即可关闭弹窗</h1>
<br />
<h3>弹窗弹出后,原窗体内容变暗,滚动鼠标滑轮,页面仍可滑动,但不可对原页面内容进行操作</h3>
<h3>点击弹窗后,弹窗消失,页面恢复初始状态</h3>
<div id="Body">
<img style="cursor: pointer;" src="http://image.xzyd.net/66/image/ad/20140113/20140113200252.jpg" title='点击图片打开弹窗' onclick="return btnPop_onclick()"/>
</div>
</body>
</html>