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

最初见与奢饰品购物网站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. 反射中Class.forName()和ClassLoader.loadClass()的区别

    一 Java类装载过程 装载:通过累的全限定名获取二进制字节流,将二进制字节流转换成方法区中的运行时数据结构,在内存中生成Java.lang.class对象: 链接:执行下面的校验.准备和解析步骤,其 ...

  2. 解决“Can't bind to local 8630 for debugger”错误--查杀多余进程

    Can't bind to local 8630 for debugger 表明本地8630端口被占用 1.Windows平台 在windows命令行窗口下执行: 1.查看所有的端口占用情况 C:\& ...

  3. Elasticsearch 全文搜索和keyword search字段的mapping定义

    在ES5.0之前我们对于需要keyword search的字段都是这样定义的: { "field name":{ "type": "string&qu ...

  4. Node.js 介绍及安装

    Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.本文详细介绍了No ...

  5. python学习之----urllib与urllib2的区分

    urllib 还是urllib2 ? 如果你用过Python 2.x 里的urllib2 库,可能会发现urllib2 与urllib 有些不同. 在Python 3.x 里,urllib2 改名为u ...

  6. 在IDEA下使用Spring Boot的热加载(Hotswap)

    你是否遇到过这样的困扰: 当你写完一段代码后,要看到效果,必须点击IDEA的停止按钮,然后再次重启启动项目,你是否觉得这样很烦呢? 如果你觉得很烦,本文就是用来解决你的问题的. 所谓热加载,就是让我们 ...

  7. YUM软件包额外扩展了解项

    5.YUM配置文件 yum的配置一般有两种方式: 一种是直接配置/etc目录下的yum.conf文件, 另外一种是在/etc/yum.repos.d目录下增加.repo文件 [root@xuliang ...

  8. JAVA 读取配置文件 xxx.properties

    package config_demo; import java.io.InputStream; import java.util.Properties; public class UrlDemo { ...

  9. C# IIS 服务器 HTTP 错误 500.21 - Internal Server Error 解决办法

    <1> 管理员身份启动控制台 <2> 输入 C:\Windows\Microsoft.NET\Framework64\v4.0.30319\aspnet_regiis.exe ...

  10. 机器学习入门-贝叶斯构造LDA主题模型，构造word2vec 1.gensim.corpora.Dictionary(构造映射字典) 2.dictionary.doc2vec(做映射) 3.gensim.model.ldamodel.LdaModel(构建主题模型)4lda.print_topics(打印主题).

    1.dictionary = gensim.corpora.Dictionary(clean_content)  对输入的列表做一个数字映射字典, 2. corpus = [dictionary,do ...