求点开后弹出半透明浮动窗的html+css+js代码_百度知道
求点开后弹出半透明浮动窗的html+css+js代码
p>主要是html布局和js代码不知道怎么写.jpg" esrc="http.jpg" target="_blank" title="点击查看大图" class="ikqb_img_alink"><img class="ikqb_img" src="/zhidao/wh%3D600%2C800/sign=535eeedc5ccc6/a758b5c9ea15cebf49.baidu./zhidao/pic/item/a758b5c9ea15cebf49.hiphotos://a。<a href="http://a.baidu://a.com/zhidao/wh%3D450%2C600/sign=9aa99df9e3fe/a758b5c9ea15cebf49
提问者采纳
显示遮罩层和图片;;
left = (document.offsetHeight)/img src=&&script&gt.;body&gt..clientWidth - oImg.;body&
&lt.clientHeight - oI&#47&lt.
&px&#39.，并将可视区的宽高赋值给遮罩层的宽高（透明的样式在css中设置），top =px&#39;2 + &#39; &
&lt.offsetWidth)/2+&#39..documentElement.定位图片的位置;&div id=&如果你会Js;
&lt.;mask&quot.执行某个事件后，
2;script&div&;&#47.;
.documentE/&gt，获取可视区的宽高的宽高;
给你写个简单的实现原理
就是不会js 才这么烦躁
&style&type=&text/css&&#mask&{&position:&&left:0;&top:0;&background:#000;&opacity:0.3;&filter:Alpha(opacity:30);&display:&&}#img&{position:&&display:}#img&img&{&width:500&height:400&border:}&/style&&/head&&body& &div&id=&mask&&&/div&
&div&id=&img&&&img&src=& &input&type=&button&&value=&显示&&id=&btn&&&script&type=&text/javascript&&var&oMask&=&document.getElementById(&#39;mask&#39;);var&oImg&=&document.getElementById(&#39;img&#39;);var&oBtn&=&document.getElementById(&#39;btn&#39;);oBtn.onclick&=&function&(){ oMask.style.display&=&&#39;block&#39;; oImg.style.display&=&&#39;block&#39;; oMask.style.width&=&document.documentElement.clientWidth&+&&#39;px&#39;; oMask.style.height&=&document.documentElement.clientHeight&+&&#39;px&#39;; oImg.style.left&=&(document.documentElement.clientWidth&-&oImg.offsetWidth)/2&+&&#39;px&#39;; oImg.style.top&=&(document.documentElement.clientHeight&-&oImg.offsetHeight)/2&+&&#39;px&#39;;}&/script&
好感激你啊
看以用的js
可是还有些问题
就是可以弹出悬浮框。但是没有办法让他关闭 。
关闭可以，但得知道关闭按钮应该设置在哪，话说你们公司没前端么
不过我已经做出来了
提问者评价
其他类似问题
js代码的相关知识
按默认排序
其他1条回答
如果是后台，可以用ModalPopupExtender实现
我只做前端重构的
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> 鼠标悬停在没有文字内容图片上时图片上方显示文字，完全是纯实现。CSS实现鼠标悬停放图片上方时显示美化内容。
原始图片显示没有文字在上方，当鼠标经过悬停时显示文字并且文字背景为半透明。可以使用纯S实现鼠标悬停图片上显示内容。
纯实现第一张图片没有文字内容，鼠标悬停时出现第二张图那样效果
使用div css实现鼠标悬停图片上方时显示文字内容原理：
首先我们设置一个盒子对象，并且将图片使用style标签内设置为CSS背景图片，同时设置该对象超链接display:none隐藏，该超链接锚文本内放好文字内容，最后设置鼠标悬停经过整个对象时候显示内容。
需要注意是，我们使用了超链接位于该盒子对象下方，并且为了美化效果给 a标签宽度与对象宽度相同，设置一定高度，设置为。
同时为了兼容IE6我们使用了。控制阅读了解支持。本效果兼容各大浏览器包括IE6。
完整如下：
&!DOCTYPE&html&&&&charset=&utf-8&&&鼠标悬停图片上显示文字&在线演示&&&img{border:0}/*&说明：设置图片边框为0&*/&body{behavior:url(&csshover.htc&);text-align:}/*&说明：兼容ie6&支持标签使用hover&*/&.divcss5{&position:width:554&height:346margin:0&auto}&.divcss5 a,.divcss5 span{display: text-decoration:none}.divcss5:hover{cursor:pointer}&.divcss5:hover a.now{cursor: position: top:0; width:100%; height:100%; z-index:100; left:0; display:}.divcss5:hover span{ display:position: bottom:0; left:0;color:#FFF;width:554 z-index:10;height:36 line-height:36 background:#000;filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;}/*&设置显示文字定位位置，&*/&&&&&&&class=&divcss5&&style=&background:url(imgexp.png)&
文字内容&href=&#&&class=&now&&&&&class=&divcss5&&style=&background:url(imgexp.png)&欢迎访问DIVCSS5网站&href=&/&&class=&now&&&&&&&
本图片上显示与隐藏文字内容简单实用，程序使用方便。特别说明，我们在标签内直径使用style属性加背景图片是为了让程序好使用。
纯CSS+DIV实现鼠标放在图片上方出现文字内容效果截图
在线演示：
打包完整源代码文件下载：
相关DIV+CSS+JQ特效：如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; ()&#8226; &#8226; ()&#8226; ()&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; 必备HTML基础教程 Essential HTML Tutorials &#8226;
&#8226; () &#8226; () &#8226; () &#8226;
&#8226; () &#8226;
&#8226; () &#8226;
&#8226; 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 18:11
原创：本文 DIVCSS5版权所有。最新文章NEWS&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; CSS EFFECTS相关文章RELATED&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; 热点文章HOT
学习与资源分享平台今天看啥 热点：
在我们设计制作一些网页的时候可能会用到半透明的效果，首先我们可能会想到用PNG图片处理，当然这是一个不错的办法，唯一的兼容性问题就是ie6下的BUG，但这也不困难，加上一段js处理就行了。但假如我们需要一个半透明遮罩的弹出层，如登陆框、注册框、提示等，这时可能需要整个页面都要被半透明的遮罩层覆盖，那么如用背景平铺的话，此时此刻也许就不是一个好办法了，图片大了会影响加载速度，图片小了同样会增加页面的渲染计算量，那么这时也许就需要用CSS滤镜了。
假如有这样一个例子：&有一个DIV块，此DIV是黑色半透明的，但此DIV里面的内容要保持原状，不能透明&，那么我们该怎么做呢？
假如HTML部分我们这样写的
&div class="touMingDiv"&
&&&&&&&&&h1&这是透明的层这是透明的层这是透明的层这是透明的层
&&&&&&&&&&&&这是透明的层这是透明的层这是透明的层这是透明的层这是透明的层
&&&&&&&&&/h1&
&&&&&/div&
&&&&&&&&这是透明的层,但上边的文字和图片均不透明，兼容ie7,ie8,ie9,ie10,FF,Chrome
&&&&&img src="bg.jpg"/&
对于CSS我们也许就这样写了
.touMingDiv{
&&&&filter:Alpha(opacity=60);
&&&&opacity:0.6;
但经过测试我们发现，不仅div容器半透明了，连div里面的文字和图片都把透明了。由于这些滤镜的属性已经继承给了子元素，所以会出现这种效果。
我们可以用下面这种发法来实现
.touMingDiv{
&&&&width:800px;
&&&&min-height:300px;
&&&&color:#fff;
&&&&background:rgba(0,0,0,0.6);
&&&&background:#000 9;
&&&&filter:Alpha(opacity=60);
.touMingDiv p,
.touMingDiv div,
.touMingDiv img{
&&&&position:relative;
注意，上面background:rgba(0,0,0,0.6);只对ie9，ie10，FF，Chrome...等有效，不包括ie6，ie7，ie8，所以有了这几句代码:
background:#000 9;
filter:Alpha(opacity=60);
另外还要对子级元素设置relative或者absolute属性，这样才能出现背景透明而背景上面的文字和图片正常显示的效果。
但这里的代码毅然不适合ie6，建议对于ie6就用png图片吧，然后用js做一下处理，可以参考我的另一篇文章
相关搜索：
相关阅读：
相关频道：
&&&&&&&&&&&&&&&&&&
HTML/CSS最近更新今天研究了下现在比较流行的半透明遮罩层的问题，毋庸置疑，肯定是要用到js来实现，今天先写了一个实现的js，等会了用jquery实现以下，效果应该会更好，代码如下
&title&HTML遮罩层，背景半透明，只显示关键内容&/title&
z-index:10001;
height:400
background:
font-size:12
margin-left:-225
background-color: #777;
filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75);
opacity: 0.6;
&script type="text/javascript" language="javascript"&
function showDetail(){//show detail
var msgDiv = document.getElementById("msgDiv");
msgDiv.style.marginTop = -75 + document.documentElement.scrollTop + "px";
var bgDiv = document.getElementById("bgDiv");
bgDiv.style.width = document.body.offsetwidth + "px";
bgDiv.style.height = screen.height + "px";
var msgShut = document.getElementById("msgShut");
msgShut.onclick = function(){
bgDiv.style.display = msgDiv.style.display = "none";
msgDiv.style.display = bgDiv.style.display = "block";
var msgDetail = document.getElementById("msgDetail");
msgDetail.innerHTML = "&p style='line-height:50font-size:30text-align:center'&显示框中的内容&/p&";
&div id="msgDiv"&
&div id="msgShut"&关闭&/div&
&div id="msgDetail"&&/div&
&div id="bgDiv"&&/div&
&p&&a href="#" onClick="showDetail()"&点击我看看&/a&&/p&
效果如下，JS还是非常强大的东东啊，以前总觉得调试困难，所以不愿意去学习，现在都是ajax的时代了，不得不学习，学会发现，其实也没有那么难，用好firedebug就可以了
本文出自 WEB前端开发-SEO-SEM | 朱宝祥的博客，转载时请注明出处及相应链接。本文永久链接: /archives/629
有人回复时邮件通知我
最受欢迎的文章
- 146,301 views - 73,226 views - 42,016 views - 28,858 views - 27,733 views - 25,046 views - 20,186 views - 14,462 views - 13,791 views - 12,273 views
&#404;回顶部完美的背景图全屏css代码 &#8211; background-size:cover?
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求，这里分享下使用方法
需要的效果
图片以背景的形式，不留空白区域
保持图像的纵横比（图片不变形）
不出现滚动条
多浏览器支持
以图片bg.jpg为例
最简单，最高效的方法 CSS3.0
归功于css3.0新增的一个属性，可以简单的实现这个效果，这里用fixed和center定位背景图，然后用background-size来使图片铺满，具体css如下
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size:
-moz-background-size:
-o-background-size:
background-size:
这段样式适用于以下浏览器
Opera 10+ (Opera 9.5 支持background-size属性 但是不支持cover)
Firefox 3.6+
这里你会发现ie8及以下版本不支持，这些蛋疼浏览器则需要添加下面的css来设置兼容
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";
这个用滤镜来兼容的写法并不是很完美，首先是图片路径，这里只能是相对于根目录的路径，或者用绝对路径；然后是图片纵横比改变了，是拉伸铺满的形式。尽管如此，总比留空白好多了吧（如果背景图bg.jpg的宽高够大，则可以不用这段，变成简单的平铺，比图片变形效果好写，大家可以尝试下）
如果你觉得上面的方法不是很满意，那试试下面这种
用img形式来实现背景平铺效果
首先在html中加入以下代码
src="bg.jpg" class="bg"
然后通过css来实现铺满效果（假设图片宽度1024px）
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
下面这个是为了屏幕小于1024px宽时，图片仍然能居中显示（注意上面假设的图片宽度）
@media screen and (max-width: 1024px) {
left: 50%;
margin-left: -512px;
兼容以下浏览器
以下浏览器的所有版本: Safari / Chrome / Opera / Firefox
IE 7/8: 平铺效果支持，但是在小于1024px的屏幕下居中效果失效
下面再说一种方法
JQ模拟的方法
src="bg.jpg" id="bg" alt=""
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
$(window).load(function() {
var theWindow
= $(window),
= $("#bg"),
aspectRatio
= $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) & aspectRatio ) {
.removeClass()
.addClass('bgheight');
.removeClass()
.addClass('bgwidth');
theWindow.resize(resizeBg).trigger("resize");
支持浏览器
以下浏览器的所有版本: Safari / Chrome / Opera / Firefox
其实我自己一般用的是（因为够用了，咱不挑/其实上面的都是俺翻译过来的）
class="bg"
position: fixed;
width: 100%;
height: 100%;
background: url(bg.jpg) no-repeat #000;
background-size:
z-index: -1;
如果图片宽度没有达到1900px以上，我会加上ie的滤镜来支持ie8(这里我故意用了绝对路径，请知晓，代码长的我想砸了ie)
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://huilang.me/bg.jpg', sizingMethod='scale')";
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://huilang.me/bg.jpg', sizingMethod='scale');
浏览器支持
绝大多数主流浏览器
CSS如此美妙 却被IE糟蹋了
文章地址：