DIV层问题！

luyuans86 2009-05-07 06:25:25
就是比如csdn上，提醒你结帖子的时候，弹出一个层，

然后整个页面被蒙上了一层纱，请问这种效果叫什么，或者说怎么实现


谢谢
...全文
359 19 打赏 收藏 转发到动态 举报
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
luyuans86 2009-05-10
  • 打赏
  • 举报
 回复
谢谢各位，我领教了，我会好好学习的。我马上结贴
wc0730 2009-05-08
  • 打赏
  • 举报
 回复
貌似光遮不难的……就是要在遮罩上要画一个好看的界面出来这个得花点功夫
悔说话的哑巴 2009-05-08
  • 打赏
  • 举报
 回复
叫遮罩层，代码就不用贴了吧
k3109852 2009-05-08
  • 打赏
  • 举报
 回复 


<input type="button" onclick="Report(800,600,800,600,'sample');return false;"/>

<!--参数说明，横纵坐标，长和宽，遮罩层的ID-->

<div id="sample" style="display:none; ">

<!--放置你要弹出的页面，可以用iframe实现-->

</div>





// JScript 文件



var t_DiglogX,t_DiglogY,t_DiglogW,t_DiglogH;



function gid(id) {

return document.getElementById?document.getElementById(id):null;

}





function Browser() {

var ua, s, i;

this.isIE = false;

this.isNS = false;

this.isOP = false;

this.isSF = false;

ua = navigator.userAgent.toLowerCase();

s = "opera";

if ((i = ua.indexOf(s)) >= 0) {

this.isOP = true;return;

}

s = "msie";

if ((i = ua.indexOf(s)) >= 0) {

this.isIE = true;return;

}

s = "netscape6/";

if ((i = ua.indexOf(s)) >= 0) {

this.isNS = true;return;

}

s = "gecko";

if ((i = ua.indexOf(s)) >= 0) {

this.isNS = true;return;

}

s = "safari";

if ((i = ua.indexOf(s)) >= 0) {

this.isSF = true;return;

}

}



function DialogLoc() {

var dde = document.documentElement;

if (window.innerWidth) {

var ww = window.innerWidth;

var wh = window.innerHeight;

var bgX = window.pageXOffset;

var bgY = window.pageYOffset;

} else {

var ww = dde.offsetWidth;

var wh = dde.offsetHeight;

var bgX = dde.scrollLeft;

var bgY = dde.scrollTop;

}

t_DiglogX = (bgX + ((ww - t_DiglogW)/2));

t_DiglogY = (bgY + ((wh - t_DiglogH)/2));

}



function DialogShow(showdata,ow,oh,w,h) {

var objDialog = document.getElementById("DialogMove");

if (!objDialog) objDialog = document.createElement("div");

t_DiglogW = ow;

t_DiglogH = oh;

DialogLoc();

objDialog.id = "DialogMove";

var oS = objDialog.style;

oS.display = "block";

oS.top = t_DiglogY + "px";

oS.left = t_DiglogX + "px";

oS.margin = "0px";

oS.padding = "0px";

oS.width = w + "px";

oS.height = h + "px";

oS.position = "absolute";

oS.zIndex = "5";

oS.background = "#FFF";

oS.border = "solid #DCEBFF 1px";

objDialog.innerHTML = showdata;

document.body.appendChild(objDialog);

}



function DialogHide() {

ScreenClean();

var objDialog = document.getElementById("DialogMove");

if (objDialog) objDialog.style.display = "none";

}



function ScreenConvert() {

var browser = new Browser();

var objScreen = gid("ScreenOver");

if (!objScreen) var objScreen = document.createElement("div");

var oS = objScreen.style;

objScreen.id = "ScreenOver";

oS.display = "block";

oS.top = oS.left = oS.margin = oS.padding = "0px";

//z-index

oS.width = "100%";

oS.height = "1400px";;

oS.position = "absolute";

oS.zIndex = "3";

if ((!browser.isSF) && (!browser.isOP)) {

oS.background = "#FDFDFD";

} else {

oS.background = "#F0F0F0";

}

oS.filter = "alpha(opacity=40)";

oS.opacity = 40/100;

oS.MozOpacity = 40/100;

document.body.appendChild(objScreen);

}



function ScreenClean() {

var objScreen = document.getElementById("ScreenOver");

if (objScreen) objScreen.style.display = "none";

}





function Report(width,height,width_align,height_align,div_id)

{

   //var PostData = "do=" + Type + "&reportid=" + ID;

   //PostRequest(window.location.protocol + "//" + window.location.host + "/AJAX_Comm.aspx", PostData);

   var showData = document.getElementById(div_id).innerHTML;

   //ScreenConvert();DialogShow("<div id=\"DialogLoading\">正在读取,请稍候...</div>",110,10,124,20);

   ScreenConvert();

   DialogShow(showData,width,height,width_align,height_align);



}

function display(){

ScreenClean();

DialogHide()

}
皓月明 2009-05-08
  • 打赏
  • 举报
 回复
javascript就可以实现
sayluyun 2009-05-08
  • 打赏
  • 举报
 回复
MARK```
littlehand 2009-05-08
  • 打赏
  • 举报
 回复
只是 javascript 动态控制dom而已,楼主可以学习下js方面的知识
中年秃头大叔 2009-05-08
  • 打赏
  • 举报
 回复
顶，楼主都给了，我就不发了...
新时代新目标新征程 2009-05-08
  • 打赏
  • 举报
 回复
实际是两个div，一个将整个页面盖住，一个在上面显示对话框
柳晛 2009-05-08
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 wc0730 的回复:]
貌似光遮不难的……就是要在遮罩上要画一个好看的界面出来这个得花点功夫
[/Quote]
那个窗口不是画的，就是调用了一个网页，类似于90年代的弹窗广告。
在Discuz论坛中，官方管这种效果叫“悬窗”，参考：http://www.discuz.net/thread-1144076-1-1.html
wapit 2009-05-08
  • 打赏
  • 举报
 回复
z-index
kuncly 2009-05-07
  • 打赏
  • 举报
 回复
好像是css滤镜
mengxj85 2009-05-07
  • 打赏
  • 举报
 回复
Up，楼上几位都给出解决方案了，JS+DIV
hmily821023 2009-05-07
  • 打赏
  • 举报
 回复 


<!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 name="Author" content="lsh710,online.hfut.edu.cn" /> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>弹出层</title> 

<style type="text/css"> 

body{ margin:0px; padding:0px;} 

#cover{ position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:#000; 

filter:alpha(opacity=55);/*对应IE*/ 

-moz-opacity: 0.55;/*对应FF*/ 

opacity: 0.55;/*对应Opera*/ 

display:none; 

} 

#tb_window{ 

width:300px; height:100px; border:2px #C60 solid; position:absolute; top:200px;left:400px;z-index:3; background:#FFF;} 



#button{ margin:auto; width:300px; margin-top:200px;} 

</style> 



</head> 



<body> 

<br /> 

<br /><br /> 

<span>我是透明的我是透明的我是透明的我是透明的我是透明的我是透明的我是透明的我是透明的我是透明的我是透明的我是透明的</span> 

<br /><br /> 

<div id="cover"> 

<div id="tb_window"> 

<a href="javascript:hidden()" >关闭</a> 

<div id="messages">里面是你要显示的内容！！！</div> 

</div> 

</div> 



<div id="button"> 

<input type="button" onclick="show('显示1显示1显示1显示1显示1')" value="显示1" /> 



<input type="button" onclick="show('显示222222222222222222')" value="显示2" /> 

</div> 





<script type="text/javascript" language="javascript"> 

function show(messges) 

{ 

document.getElementById("messages").innerHTML="<div id='messages'>"+messges+"！！</div>"; 

document.getElementById("button").style.display = "none"; 

document.getElementById("cover").style.display = "block"; 



} 

function hidden() 

{ 

document.getElementById("cover").style.display = "none"; 

document.getElementById("button").style.display = "block"; 

} 

</script> 

</body> 

</html>
路人乙e 2009-05-07
  • 打赏
  • 举报
 回复
<html>
<head>
<script>
function sAlert(src)
{
//var eSrc=(document.all)?window.event.srcElement:arguments[1];
var shield = document.createElement("DIV");
shield.id = "shield";
shield.style.position = "absolute";
shield.style.left = "0px";
shield.style.top = "0px";
shield.style.width = "100%";
shield.style.height = document.body.scrollHeight+"px";
shield.style.background = "#333";
shield.style.textAlign = "center";
shield.style.zIndex = "10000";
shield.style.filter = "alpha(opacity=0)";
shield.style.opacity = 0;
var alertFram = document.createElement("DIV");
alertFram.id="alertFram";
alertFram.style.position = "absolute";
alertFram.style.left = "0%";
alertFram.style.top = "0%";
//alertFram.style.marginLeft = "-225px" ;
//alertFram.style.marginTop = -75+document.documentElement.scrollTop+"px";
alertFram.style.width = "100%";
//alertFram.style.height = "150px";
//alertFram.style.background = "#ccc";
alertFram.style.textAlign = "center";
alertFram.style.lineHeight = "150px";
alertFram.style.zIndex = "10001";

strHtml = "<table align=center cellpadding=0 cellspacing=0>";
strHtml += "<tr><td><img src='"+src+"' border=1/></td></tr>";
strHtml += "<tr><td align=right><a href='javascript:doOk();' style='font-size:11px'>关闭</a></td></tr></table>";
alertFram.innerHTML = strHtml;
document.body.appendChild(alertFram);
document.body.appendChild(shield);
this.setOpacity = function(obj,opacity){
if(opacity>=1)opacity=opacity/100;
try{ obj.style.opacity=opacity; }catch(e){}
try{
if(obj.filters.length>0&&obj.filters("alpha")){
obj.filters("alpha").opacity=opacity*150;
}else{
obj.style.filter="alpha(opacity=\""+(opacity*150)+"\")";
}
}catch(e){}
}
var c = 0;
this.doAlpha = function(){
if (++c > 20){clearInterval(ad);return 0;}
setOpacity(shield,c);
}
var ad = setInterval("doAlpha()",1);
this.doOk = function(){
document.body.removeChild(alertFram);
document.body.removeChild(shield);
document.body.onselectstart = function(){return true;}
document.body.oncontextmenu = function(){return true;}
}
document.body.onselectstart = function(){return false;}
document.body.oncontextmenu = function(){return false;}
}
</script>
</head>
<body>
<input type=button onclick="sAlert('http://hiphotos.baidu.com/qijian100/pic/item/ed4ccc6381288b6d0c33fa04.jpg')" value=登陆>
<div style="height:100px;"></div>
<p align=center><select><option>---</option></select></p>
</body>
</html>
coodd 2009-05-07
  • 打赏
  • 举报
 回复
实际是两个div，一个将整个页面盖住，一个在上面显示对话框
冷月孤峰 2009-05-07
  • 打赏
  • 举报
 回复
参考：


<html>







<head>



<meta http-equiv="Content-Type" content="text/html; charset=gb2312">



<title> http://hi.csdn.net/YoungEngineer/profile </title>



</head>







<body style="margin:0;">



<div id="topCoverDiv" style="display:none;float:left;z-index:100;position:absolute;top:expression(this.offsetParent.scrollTop);left:expression(this.offsetParent.scrollLeft);width:100%;height:100%;filter:alpha(opacity=90);background-color:#888888;" oncontextmenu="return false;"><div style="z-index:101;position:absolute;top:200px;left:200px;width:200px;height:200px;background-color:#FFFFFF;"><input type=button value="取消页面灰掉" onclick="disableBodyArea(false);" /><a href="http://www.svnhost.cn">SVN托管服务</a></div></div>







<div style="font-size:10pt;">



注1：灰掉页面<br/> 







<br/>  



注：本页面仅在dreamwear下测试过。其它浏览器或其它版本未经测试。改进了一下，IE7下可以关闭了，firefox下还有些缺陷，页面超过一屏时，下边没有遮住。可以写脚本实现。<br/>         



注-----：JK：<a href="mailTo:jk_10000@yahoo.com.cn?subject=About Body">JK_10000@yahoo.com.cn</a><a href="http://www.svnhost.cn">SVN托管服务</a><br/>      



<hr/>  



</div>











<select><option >test</option></select>



<input type=button value="点击将页面灰掉" onclick="disableBodyArea(true);"> 



<br><br><br><br>



<br><br><br><br>



<select><option >test</option></select>



<br><br><br><br>



<br><br><br><br>



<select><option >test</option></select>



<select><option >test</option></select>







</body>







</html>



<script >



function disableBodyArea(f){



    document.getElementById('topCoverDiv').style.display = f? '':'none';



    var allSelects=document.getElementsByTagName("select");



    for(var i=0;i<allSelects.length;i++) {



        allSelects[i].disabled=f;

    }

}

</script>
yiyeqiubo 2009-05-07
  • 打赏
  • 举报
 回复
用JavaScript可以解决，具体做法请参考
yuankunliuying 2009-05-07
  • 打赏
  • 举报
 回复
这种在样式是可以实现的，遮罩层，在asp.net中Ajax中的弹出窗口就可以实现这种效果
div+css布局大全
div+css布局大全 B/S项目表现层也很重要！
解决div相互覆盖层叠问题！
当我们看到div相互层叠覆盖的时候，首先我们想到的是否有div脱离了文档流？其次我们在分析他们是通过什么方法脱离文档流的？ 　目前，常见的脱离文档流的方法有position定位和float浮动两种！ 　如果不知道什么是...
可拖动DIV层的实现方法
可拖动DIV层的实现方法这几天做了一个英文单词搜索的谷歌扩展，其中的划词搜索功能会产生一个可托拖动的DIV层来作为结果显示，为了做一个较为完善的拖动层，花费了很长时间进行设计与调试。在此把心得总结了一下，讲...
【jQuery】使用id选择器，找出外层div中嵌套的内层div
场景：为了实现一个 toggle 效果，即第一次点击一个“添加”...这时需要根据（内层）div的id，抓到这个（内层）的div，然后使用$("#div1").remove();删除它，从而实现 toggle 效果 语法 使用 jQuery id选择器 $("#...
DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加
DIV重叠 CSS让DIV层叠、叠加，CSS让两个DIV或多个DIV按顺序重叠叠加篇 让DIV重叠并按想要顺序重叠需要CSS来实现，即CSS绝对定位进行实现。 重叠样式需要主要CSS样式解释 1、z-index 重叠顺序属性 2、position:...
.NET社区

62,074

社区成员

669,028

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章