带有透明边框的jQuery弹出层

最新推荐文章于 2022-02-26 09:45:52 发布

陌上风情

最新推荐文章于 2022-02-26 09:45:52 发布

阅读量6.4k

点赞数

分类专栏： Javascript 文章标签： jquery div xhtml css html

本文链接：https://blog.csdn.net/liuyong0818/article/details/5325437

版权

Javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

自从在网站上使用了弹出层以后，一直想给他套一个漂亮的半透明边框。
思路一：在弹出层外面再套一个Div，设置他的背景为黑色，然后使用css滤镜设置他的透明度，padding为5个像素，这样就ok了。

页面结构：

岂料不行，设置外面的大的Div为透明后，里面的Title和Content也都变得透明了，显然这不是我要的效果。
很明显透明属性被它里面的两个Div继承了，导致里面也透明了，把里面的div的透明重写一下，写为不透明应该就可以了，重写，岂料还是不行，没有任何反应，怎么办？貌似走进了一个死胡同。

pass掉吧。。。

再想

思路二：既然透明层里面的内容也会被设置为透明，那么何不设置一个空的div，让他绝对定位，高度和宽度都比弹出层要大几个像素，那么看起来就像是弹出层有了一个透明的边框，尽管这其实是一个假的边框哈哈。。。

页面结构改为：

这样子就搞定了O(∩_∩)O哈哈~

看代码：

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>带透明边框的层</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#window {width:300px; height:200px; position:relative; margin:0 auto} #windowBgBorder { width:310px; height:210px; position:absolute; left:-5px; top:-5px; background-color:#000000; -moz-opacity:0.3; /*for ff*/ opacity:0.3; /*for ff3.5+ css3.0标准的*/ filter:alpha(opacity=30); z-index:900; } #windowTitle { background-color:#333333; width:100%; height:30px; color:#FFFFFF; z-index:1000;} #windowContent { background-color:#333333; width:100%; height:170px; color:#FFFFFF; z-index:1000;}</style> </head> <body> <div id="test" style="width:600px; height:600px; padding-top:50px; background-color:#00FF99;"> <div id="window"> <div id="windowBgBorder"></div> <div id="windowTitle">标题</div> <div id="windowContent">我是内容<br />我是内容<br />我是内容</div> </div> </div> </body> </html>

完整弹出层下载，我用了tipswindown插件插件

陌上风情

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
带有透明边框的jQuery弹出层

自从在网站上使用了弹出层以后，一直想给他套一个漂亮的半透明边框。思路一：在弹出层外面再套一个Div，设置他的背景为黑色，然后使用css滤镜设置他的透明度，padding为5个像素，这样就ok了。页面结构：岂料不行，设置外面的大的Div为透明后，里面的Title和Content也都变得透明了，显然这不是我要的效果。很明显透明属性被它里面的两个Div
复制链接

扫一扫