注册
个人空间
1 第一个想起的方法是用一个大的层把网页全部遮住，该层用一个半透明的gif图片来被做
但是问题来了（我想大家都遇到过了，呵呵），就是下拉框(Select)冒出来了。
2 第二个方法是在网上查到的，用一个iFrame放在下面把网页全部遮住，这次是可以遮住下拉框了
但是问题又来了，iFrame设成不透明的，那会很难看，还不如用弹出窗口，如果设成透明的，下拉框又冒出来了
3 后来又在网上查资料，iFrame设成不透明的用alpha来控制透明度，这次似乎可以了
但是，但是问题还是来了，下拉框居然被隐藏了，更难忍受的是，在滚动窗口的滚动条是，下拉框若隐若现。
大家能帮我看看，有没有办法能真正的实现用半透明的东西遮住层下面的网页，谢谢了。
<html>
<head>
<style>
*{ margin:0; padding:0;}
body{ height:100%;}
.dis{ width:100%; background: green; position:absolute; left:0; right:0; top:0; bottom:0; -moz-opacity:0.5; filter:alpha(opacity=50);z-index:99; height:100%; }
</style>
</head>
<body>
<select id=sl>
<option>1</option>
<option>2</option>
<option>3</option>
</select><br/>
dsdddddddddddddddd<br/>
<input type=button value="change" onclick=test() ID="Button1" NAME="Button1">
</body>
</html>
<script>
function test()
{
var div = document.createElement("div");
var iframe = document.createElement("iframe");
iframe.className="dis";
div.className="dis";
div.appendChild(iframe);
document.getElementsByTagName("body")[0].appendChild(div);
}
</script>
上面下拉框是过滤调了
是啊，下拉框被隐藏了。
不知道有没有办法解决这个问题
那就头疼医头，脚疼医脚，虽然恶劣点，呵呵。下把那个select给hidden，然后你再让他display呢？
to bigman_lfj(盐水小鱼)
隐藏倒是可能解决，但客户那里不同意啊
这个是比较麻烦的
IE里下拉框是怪胎，不接受半透明显示，
不用为它追求完美。
是啊，没有办法，客户需求
当然真做不出来也没办法，唉
如果一定要做到，那就把select都disabled掉.
<html>
<head>
<style>
*{ margin:0; padding:0;}
body{ height:100%;}
.dis{ width:100%; background: green; position:absolute; left:0; right:0; top:0; bottom:0; -moz-opacity:0.5; filter:alpha(opacity=50);z-index:99; height:100%; }
</style>
</head>
<body>
<select id=sl>
<option>1</option>
<option>2</option>
<option>3</option>
</select><br/>
dsdddddddddddddddd<br/>
<input type=button value="change" onclick=test() ID="Button1" NAME="Button1">
</body>
</html>
<script>
function test()
{
var div = document.createElement("<div class='dis'>");
div.innerHTML=" "
document.body.appendChild(div);
var allSelects=document.getElementsByTagName("select");
for(var i=0;i<allSelects.length;i++)
{
allSelects[i].disabled=true;
}
}
</script>
IFRAME背景透明
<BODY STYLE="background-color: red">
<IFRAME ID="Frame1" SRC=http://topic.csdn.net/t/20061124/10/"transparentBody.htm" allowTransparency="true">
</IFRAME>
<IFRAME ID="Frame2" SRC=http://topic.csdn.net/t/20061124/10/"transparentBody.htm" allowTransparency="true"
STYLE="background-color: green">
</IFRAME>
<IFRAME ID="Frame3" SRC=http://topic.csdn.net/t/20061124/10/"transparentBody.htm">
</IFRAME>
<IFRAME ID="Frame4" SRC=http://topic.csdn.net/t/20061124/10/"transparentBody.htm"
STYLE="background-color: green">
</IFRAME>
</BODY>
JK_10000(JK)的方法不错
要是可以修改select的样式就完美了
to JK_10000(JK)
disabled只是灰掉，但是不遮住还是不行
建议你去和客户好好
商榷一下
to ttyp(@http://www.cnblogs.com/ttyp/)
你的方法似乎不行
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
</head>
<body >
text
<select><option >test</option></select>
<input>
<a href=http://topic.csdn.net/t/20061124/10/#>a</a>
<input type=button value="点击将页面灰掉," onclick="disableBodyArea(window);">
</body>
</html>
<script defer >
function disableBodyArea(winObj)
{
//if(!document.all) return false;//For firefox etc.
var topCoverDiv=winObj.document.createElement("<div style='position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=20);background-color:#888888;' oncontextmenu='return false;'>");
topCoverDiv.innerHTML=" "
winObj.document.body.appendChild(topCoverDiv);
var allSelects=winObj.document.getElementsByTagName("select");
for(var i=0;i<allSelects.length;i++) {
allSelects[i].disabled=true;
allSelects[i].style.backgroundColor="#EEEEEE";
}
}
</script>
效果见
http://xlite.lanqiaobiz.com/web/test.htm
需要一个list.gif来做背景，
<html>
<head>
<style>
*{margin:0;padding:0}
body{height:100%;}
.dis{ width:100%; background: green; position:absolute; left:0; right:0; top:0; bottom:0; -moz-opacity:0.5; filter:alpha(opacity=50);z-index:99; height:90%; }
.hack{
position:absolute;
background:url(list.gif) no-repeat right;
}
</style>
</head>
<body>
<p>dsdddddddddddddddd</p>
<p>
<select id=s1>
<option>11111111</option>
<option>222222222222</option>
<option>3333333333333333</option>
</select>
</p>
<p>
<select id=s1 style="width:300px">
<option>AAAAA</option>
<option>BBBBB</option>
<option>CCCCCCCCCCCCCCCCC</option>
</select>
</p>
<input type="button" value="change" onclick=test() ID="Button1" NAME="Button1">
<input type="button" value="取消" onclick="hide()" style="margin-top:60%"/>
</body>
</html>
<script>
function test()
{
var div = document.createElement("div");
var iframe = document.createElement("iframe");
div.id = "frameContainer";
iframe.className="dis";
div.className="dis";
div.appendChild(iframe);
document.getElementsByTagName("body")[0].appendChild(div);
var sel = document.getElementsByTagName("select");
if(!window.ActiveXObject) return;
for(i=0;i<sel.length;i++){
rect = sel[i].getBoundingClientRect();
var inp = document.createElement("input");
inp.type="text";
inp.id = "selectHack";
inp.className = 'hack';
inp.style.left = rect.left -2;
inp.style.top = rect.top - 2;
inp.style.width = rect.right - rect.left;
inp.style.paddingLeft = "3px";
inp.style.paddingTop = "1px";
inp.value = sel[i].options[sel[i].selectedIndex].text
document.body.appendChild(inp);
}
}
function hide()
{
var fc = document.getElementById("frameContainer");
fc.parentNode.removeChild(fc);
if(!window.ActiveXObject) return;
inp = document.getElementsByName("selectHack");
for(i=0;i<inp.length;i++)
{
inp[i].removeNode(true);
}
}
</script>
参考
<HTML><HEAD><TITLE>WWW.Seolm.Com 无为Tools</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2800.1578" name=GENERATOR></HEAD>
<BODY><!-- Code Begin -->
<SCRIPT language=javascript>
// 隐藏被ID为objID的对象（层）遮挡的所有select
function HideOverSels(objID)
{
var sels = document.getElementsByTagName('select');
for (var i = 0; i < sels.length; i++)
if (Obj1OverObj2(document.all[objID], sels[i]))
sels[i].style.visibility = 'hidden';
else
sels[i].style.visibility = 'visible';
}
//判断obj1是否遮挡了obj2
function Obj1OverObj2(obj1, obj2)
{
var pos1 = getPosition(obj1)
var pos2 = getPosition(obj2)
var result = true;
var obj1Left = pos1.left - window.document.body.scrollLeft;
var obj1Top = pos1.top - window.document.body.scrollTop;
var obj1Right = obj1Left + obj1.offsetWidth;
var obj1Bottom = obj1Top + obj1.offsetHeight;
var obj2Left = pos2.left - window.document.body.scrollLeft;
var obj2Top = pos2.top - window.document.body.scrollTop;
var obj2Right = obj2Left + obj2.offsetWidth;
var obj2Bottom = obj2Top + obj2.offsetHeight;
if (obj1Right <= obj2Left || obj1Bottom <= obj2Top ||
obj1Left >= obj2Right || obj1Top >= obj2Bottom)
result = false;
return result;
}
// 获取对象的坐标
function getPosition(Obj)
{
for (var sumTop=0,sumLeft=0;Obj!=window.document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft, Obj=Obj.offsetParent);
return {left:sumLeft,top:sumTop}
}
</SCRIPT>
<SCRIPT language=JavaScript>
<!--
var currentMoveObj = null; //当前拖动对象
var relLeft; //鼠标按下位置相对对象位置
var relTop;
function f_mdown(obj)
{
currentMoveObj = obj; //当对象被按下时，记录该对象
currentMoveObj.style.position = "absolute";
relLeft = event.x - currentMoveObj.style.pixelLeft;
relTop = event.y - currentMoveObj.style.pixelTop;
}
window.document.onmouseup = function()
{
currentMoveObj = null; //当鼠标释放时同时释放拖动对象
}
function f_move(obj)
{
if(currentMoveObj != null)
{
currentMoveObj.style.pixelLeft=event.x-relLeft;
currentMoveObj.style.pixelTop=event.y-relTop;
}
}
//-->
</SCRIPT>
<SELECT name=""> <OPTION selected>test1</OPTION> <OPTION>test2</OPTION> <OPTION>test3</OPTION></SELECT>
<TABLE onmousemove="f_move(this);HideOverSels('t1')" onselectstart="return false" onmousedown=f_mdown(this) id=t1 style="LEFT: 50px; POSITION: absolute; TOP: 50px" width=200 border=1>
<TBODY>
<TR>
<TD style="CURSOR: move" align=middle bgColor=#cccccc>title1</TD></TR>
<TR>
<TD align=middle height=60>移到select上看看效果：）</TD></TR></TBODY></TABLE>
<TABLE onmousemove="f_move(this);HideOverSels('t2')" onselectstart="return false" onmousedown=f_mdown(this) id=t2 style="LEFT: 350px; POSITION: absolute; TOP: 250px" width=200 border=1>
<TBODY>
<TR>
<TD style="CURSOR: move" align=middle bgColor=#cccccc>title2</TD></TR>
<TR>
<TD align=middle height=60>content</TD></TR></TBODY></TABLE><!-- Code Over --></BODY></HTML>
跟ttyp代 *** 效果相类似的代 *** ：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>
.backgroundIframe{
position:absolute;
z-index:-1;
width:100%;
height:100%;
top:0;left:0;
}
</style>
<script language=javascript>
var *** Drag_beginMoving=false;
var *** Drag_header=null;
function *** Drag_Mousedown(mouseEvent,obj){
*** Drag_beginMoving=true;
mouseEvent=mouseEvent||window.event;
*** Drag_header=obj;
var theAlterableTable= *** Drag_header.offsetParent;
*** Drag_header.mouseDownX=theAlterableTable.offsetLeft-mouseEvent.clientX;
*** Drag_header.mouseDownY=theAlterableTable.offsetTop-mouseEvent.clientY;
if( *** Drag_header.setCapture) *** Drag_header.setCapture();
else mouseEvent.preventDefault();
}
function *** Drag_Mousemove(mouseEvent){
if(! *** Drag_beginMoving) return ;
mouseEvent=mouseEvent||window.event;
var theAlterableTable= *** Drag_header.offsetParent;
if(mouseEvent.clientX>1) //防止被移出页面之外，造成无法移回的后果
theAlterableTable.style.left = *** Drag_header.mouseDownX+mouseEvent.clientX;
if(mouseEvent.clientY>1)
theAlterableTable.style.top = *** Drag_header.mouseDownY+mouseEvent.clientY;
}
function *** Drag_Mouseup(obj){
if(! *** Drag_beginMoving) return ;
if( *** Drag_header.releaseCapture) *** Drag_header.releaseCapture();
*** Drag_beginMoving=false;
}
</script>
<script defer>
document.onmousemove= *** Drag_Mousemove;
document.onmouseup= *** Drag_Mouseup;
</script>
</head>
<body>
<div style="font-size:10pt;">
注1：本页面示例：简单拖动(Drag) <br/>
<br/>
注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。<br/>
注-----：作者JK：<a href=http://topic.csdn.net/t/20061124/10/"mailTo:jk_10000@yahoo.com.cn?subject=About%20 *** Drag">JK_10000@yahoo.com.cn</a><br/>
<hr/>
</div>
<select><option>Select for Test</select>
<div style="position:absolute;top:50;left:50;width:200;background-color:#eeeeee;z-index:10;border:1 *** solid #777777;" >
<!--iframe class="backgroundIframe" scrolling="no" frameborder=0 ></iframe-->
<div onmousedown=" *** Drag_Mousedown(event,this)" style="cursor:move;background-color:#cccccc;width:100%;" >header</div>
<div style="background-color:#ffffff;">content</div>
</div>
<div style="position:absolute;top:40;left:40;width:200;background-color:#eeeeee;z-index:10;border:1 *** solid #777777;" >
<iframe class="backgroundIframe" frameborder=0 ></iframe>
<div onmousedown=" *** Drag_Mousedown(event,this)" style="cursor:move;background-color:#cccccc;width:100%;" >header</div>
<div style="background-color:#ffffff;">content</div>
</div>
</body>
</html>
另：楼主的问题，以下代 *** 处理了body有scrollbar时出现的问题：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
</head>
<body style="margin:0;">
<select><option >test</option></select>
<input>
<a href=http://topic.csdn.net/t/20061124/10/#>a</a>
<input type=button value="点击将页面灰掉" onclick="disableBodyArea();">
<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>
<br><br><br><br>
<br><br><br><br>
</body>
</html>
<script >
function disableBodyArea(){
if(!document.all) return false;//For firefox etc.
window.topCoverDiv=document.createElement("<div style='z-index:100;position:absolute;top:expression(this.offsetParent.scrollTop);left:expression(this.offsetParent.scrollLeft);width:100%;height:100%;filter:alpha(opacity=20);background-color:#888888;' oncontextmenu='return false;'>");
topCoverDiv.innerHTML=" "
document.body.appendChild(topCoverDiv);
var allSelects=document.getElementsByTagName("select");
for(var i=0;i<allSelects.length;i++) {
allSelects[i].disabled=true;
allSelects[i].style.backgroundColor="#EEEEEE";
}
}
</script>
| 论坛热门帖子: | [lch203] 写得蛮好的linux学习笔记(10-21) [黑马制造] 学习java的30个目标(10-19) [笑傲股林] 做测试半年了，有点迷茫，应该再学些什么提高自己的测试水平和测试能力呢？(10-19) [udp8589] 大家用google的来吱一声? 用百度的~~也来报道下?(10-18) [沂偌掳兆] 本人总结的一些认为C++比较经典的书籍，希望对大家有用(10-18) |
| TAG标签: | 面的 网页 问题 透明 关于 解决 不了 难题 var style |
