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

最初见与奢饰品购物网站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. 1027 Colors in Mars （20 分）

    1027 Colors in Mars (20 分) People in Mars represent the colors in their computers in a similar way a ...

  2. Linux下XAMPP装完之后，Navicat无法连上数据库的问题的解决 注意'mypassword'是当前的mysql登录密码

    Linux下装完XAMPP之后,mysql是自带装好了的,这个时候,mysql的root用户没有密码. 在mac 下安装好xampp后,需要在终端命令行操作时,比如输入:mysql -u root - ...

  3. Linux常见英文报错中文翻译(菜鸟必知)

    Linux常见英文报错中文翻译(菜鸟必知) 1.command not found 命令没有找到 2.No such file or directory 没有这个文件或目录 3.Permission ...

  4. Spark wordcount开发并提交到集群运行

    使用的ide是eclipse package com.luogankun.spark.base import org.apache.spark.SparkConf import org.apache. ...

  5. php上传文件涉及到的参数

          php上传文件涉及到的参数: 几个参数调整: 0:文件上传时存放文件的临时目录.必须是 PHP 进程所有者用户可写的目录.如果未指定则 PHP 使用系统默认值 php.ini文件中uplo ...

  6. DevExpress.XtraEditors.Groupcontrol 中创建按钮

    1. 添加引用: Imports DevExpress.XtraEditors.ButtonsPanelControl 2. 添加按钮语句: GroupControl1.CustomHeaderBut ...

  7. vi和vim的三种模式

    1.一般模式 用vi 或vim 命令 ——>一般模式 2. 插入模式 i,o,a,r 及其各自大写 ——>插入模式 一般用 i 3.命令行模式 用命令来完成 读取,存盘,替换,离开vim ...

  8. dir 使用，统计文件数量

    dir /b /a-d | find /v /c "$$$$" >1.log--※ 来源:·水木社区 newsmth.net·[FROM: 125.46.17.*] 今天去水 ...

  9. 创建类type （底层代码）

    类的创建时是用type 实现的 def __init__(self, name): self.name = name def fun(self): print("%s is talking' ...

  10. as3 air 获取文件夹下的所有文件

    private function getFile(directory:File) { var files:Array = directory.getDirectoryListing(); for(va ...