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

最初见与奢饰品购物网站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. REST-assured 2发送文字到接口

    获取token https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=ID&corpsecret=SECRECT #java package ...

  2. JIRA 的字段配置

    默认字段(Default Field Configuration)配置,最好都是非必填. 项目的字段关联字段方案. 字段方案针对不同问题类型,设置不同的字段配置策略. 在每个字段配置策略中去设置自定义 ...

  3. apache 服务器在ubuntu上图片无法显示解决

    很简单的一段代码实例: <!DOCTYPE html> <html> <body> <h2>Welcome here!</h2> <i ...

  4. file_get_contents是打工文件或URL获取内容的方法，比其稳定的还有curl_get_contents

    相信使用过file_get_contents函数的朋友都知道,当获取的$url访问不了时,会导致页面漫长的等待,甚至还能导致PHP进程占用CPU达100%,因此这个函数就诞生了 分享一个实际在用的函数 ...

  5. php变量详细讲解

    变量是用于存储信息的"容器". 定义一个变量的语法: $变量名 = 值; 使用变量的例子: <?php $x=5; $y=6; $z=$x+$y; echo $z; ?> ...

  6. MySQL数据库Innodb储存引擎----储存页的结构

    上一篇博客回顾: 1:数据库拥有众多的储存引擎,现在主要使用的是Inoodb,这个储存引擎有Compact,Redundant,Dynamic,Compressed四种行格式 2:Compact行格式 ...

  7. Jquery学习（二）

    滚轮事件与函数节流 jquery.mousewheel插件使用 jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事件不兼容,可以使用jquery的滚轮事件插件jquery.mousewheel.j ...

  8. 代码： 返回页面顶部 jquery

    jquery代码: 返回页面顶部 <script type="text/javascript" src="http://cdn.bootcss.com/jquery ...

  9. PHP把excel导入mysql数据库最常用的方法

    Posted on 2011-03-25 09:16 PHP博客 阅读(1316) 评论(0)  编辑 收藏 引用 网摘 PHP把excel(xls)文件导入mysql数据库最常用的方法就是先把xls ...

  10. Declaration terminated incorrectly 讨厌 这样就不可以了

    #include "vcl.fctreeview.hpp"#include "RM_Class.hpp"#include "RM_Common.hpp ...