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

最初见与奢饰品购物网站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>
 

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

  1. js制作圆角按钮（兼容谷歌，ie7，ie8）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. input 输入框只能输入数字，一行代码解决，兼容谷歌 火狐

    <input id="mobile" name="mobile" type="text" onkeyup="this.val ...

  3. DIV+CSS解决IE6，IE7，IE8，FF兼容问题

    1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1. <metahttp-equivmetahttp-equiv ...

  4. DIV+CSS解决IE6，IE7，IE8，FF兼容问题(转至http://www.douban.com/note/163291324/)

    2011-07-25 21:11:47     DIV+CSS解决IE6,IE7,IE8,FF兼容问题 1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE ...

  5. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  6. DIV+CSS一些小小的技巧

    DIV+CSS网页布局技巧实例1:设置网页整体居中的代码 以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实 ...

  7. DIV CSS 网页兼容全搞定 （IE6 IE7 IE8 IE9 火狐 谷歌）

    CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...

  8. div+css兼容 ie6_ie7_ie8_ie9_ie10和FireFox_Chrome等浏览器方法

    1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行   ...

  9. div+css 布局下兼容IE6 IE7 FF常见问题

    div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...

随机推荐

  1. [转]修改DLL

    部分内容来自:http://blog.csdn.net/csdncshuan/article/details/51477705 为没有源码的DLL文件添加强名称 如果项目中引用了其他没有源码的dll文 ...

  2. PHP简单查询界面

    <html> <style type='text/css'> table {border-collapse:collapse;} td {border:solid 1px #d ...

  3. Linux下几种反弹Shell方法的总结与理解

    之前在网上看到很多师傅们总结的linux反弹shell的一些方法,为了更熟练的去运用这些技术,于是自己花精力查了很多资料去理解这些命令的含义,将研究的成果记录在这里,所谓的反弹shell,指的是我们在 ...

  4. HttpURLConnection连接超时问题

    1.问题描述 这几天测试重构后的下载框架,发现在下载过程中如果网络中断或网络较差,个别应用的下载就会阻塞卡住,一直卡在 “正在下载 xx%”.   2.问题排查和定位 思考:网络差不应该报网络异常的错 ...

  5. oletools下载安装及rtfobj使用

    rtf内嵌对象分析提取工具rtfobj是oletools的一部分 oletools各个版本下载地址https://bitbucket.org/decalage/oletools/downloads/ ...

  6. 如何捕捉@tornado.gen.coroutine里的异常

    from tornado import gen from tornado.ioloop import IOLoop @gen.coroutine def throw(a,b): try: a/b ra ...

  7. Linux常用命令的命名来源

    很多人在学习Linux的时候会疑惑:这么多的Linux名,他们都是怎么被定义的?林纳斯是怎么制定如此花样繁多且数量庞大的命令?今天这篇文章可能会帮你解开疑惑. ## 1. 目录缩写 缩写 | 全称 | ...

  8. url 路由系统

    Django的路由系统 URL配置(URLconf)就像Django所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表. 我们就是以这种方式告诉Django,遇到哪个URL的时 ...

  9. collections模块---（namedtuple、deque、OrderdDict、defaultdict、Counter）和configparser模块

    在内置数据类型(dict. list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型:Counter. deque.defaultdict.namedtuple 和 ...

  10. CENTOS 挂载ntfs移动硬盘

    参考网址: http://www.it610.com/article/3368930.htm (较全)http://blog.51cto.com/ultrasql/1927672