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

最初见与奢饰品购物网站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. [UE4]引擎自身提供的无锁队列等无锁容器（TLockFreePointerList）

    常用的接口: TLockFreePointerListFIFO<T>:先进先出: TLockFreePointerListLIFO<T>:后进先出: TLockFreePoin ...

  2. centos 7 mount usb hard disk(ntfs format)

    1. yum install -y epel-release* 2. yum install -y ntfs-3g 3. 命令:fdisk -l (查看磁盘分区信息) [root@devserverg ...

  3. Python中的logger和handler到底是个什么鬼

    最近的任务经常涉及到日志的记录,特意去又学了一遍logging的记录方法.跟java一样,python的日志记录也是比较繁琐的一件事,在写一条记录之前,要写好多东西.典型的日志记录的步骤是这样的: 创 ...

  4. python2 与python3中最大的区别(编码问题bytes&str

    1,在python2.x 中是不区分bytes和str类型的,在python3中bytes和str中是区分开的,str的所有操作bytes都支持 python2 中 >>> s = ...

  5. smb.conf详解[未完]

    看着玩意看的吐血!!!! baidu\google充斥着一堆错误的文章及翻译,samba.org上动辄就是this document is old and might be incurrent. 不过 ...

  6. mysq更新(六) 单表查询 多表查询

      本节重点: 单表查询 语法: 一.单表查询的语法 SELECT 字段1,字段2... FROM 表名 WHERE 条件 GROUP BY field HAVING 筛选 ORDER BY fiel ...

  7. web安全深度剖析 pdf

    扫加公众号,回复“web安全深度剖析",免费获取此书.

  8. Java面向对象之抽象类

    内容: 1.抽象类的产生 2.抽象类和抽象方法的定义与使用 3.抽象类和抽象方法的注意事项 4.实例分析 1.抽象类的产生 当编写一个类时,我们往往会为该类定义一些方法,这些方法是用来描述该类的功能具 ...

  9. Postman的基础使用

    postman的基础功能,官方文档介绍的是相当啰嗦,所以笔者这里先简单介绍一下主界面,入门功能就都提到了.稍后我们再一一介绍基础功能的使用方法. Collections:在Postman中,Colle ...

  10. selenium+python自动化90-unittest多线程执行用例

    前言 假设执行一条脚本(.py)用例一分钟,那么100个脚本需要100分钟,当你的用例达到一千条时需要1000分钟,也就是16个多小时... 那么如何并行运行多个.py的脚本,节省时间呢?这就用到多线 ...