87,922
社区成员
发帖
与我相关
我的任务
分享请教这个页面弹出窗口怎么实现的?
web程序不太懂，请教一下，提问问题这个界面下，点击上传附件后弹出窗口，然后页面变灰，链接不能点击，只有关闭该窗口后才能恢复。这个是怎么实现的？javascript么？
...全文
请发表友善的回复…
发表回复
tianmingl 2008-07-18
- 打赏
- 举报
怎么能让div移动？设置什么属性？
anying2055 2008-07-18
- 打赏
- 举报
建2个div就可以了
一把编程的菜刀 2008-07-18
- 打赏
- 举报
[Quote=引用楼主 tianmingl 的帖子:]
web程序不太懂，请教一下，提问问题这个界面下，点击上传附件后弹出窗口，然后页面变灰，链接不能点击，只有关闭该窗口后才能恢复。这个是怎么实现的？javascript么？
[/Quote]
呵呵，这个很简单的，其实上就是限制层
web程序不太懂，请教一下，提问问题这个界面下，点击上传附件后弹出窗口，然后页面变灰，链接不能点击，只有关闭该窗口后才能恢复。这个是怎么实现的？javascript么？
[/Quote]
呵呵，这个很简单的，其实上就是限制层
幻海航行 2008-07-18
- 打赏
- 举报
//判断浏览器，如果是ie isIe=true;
var isIe=(document.all)?true:false;
/*
*设置名字为select的对象的所有样式是否可用
* state ---是否可以见
**/
function setSelectState(state) {
var objl=document.getElementsByTagName('select');
for(var i=0;i<objl.length;i++) {
objl[i].style.visibility=state;
}
}
/*
*获取对象的坐标值
*
***/
function mousePosition(ev) {
if(ev.pageX || ev.pageY) {
return {
x:ev.pageX, y:ev.pageY
};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
/*
*弹出层的方法
* wTitle ---层的标题
* content ---层内的内容
* pos ---坐标对象
* wWidth ---层的宽度
*/
function showMessageBox(wTitle,content,pos,wWidth) {
closeWindow();
//获取游览器的可视区域宽与高
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight);
//alert(bWidth+"___"+bHeight);
//设置可见度
if(isIe){
setSelectState('hidden');
}
//创建弹出层的背景div
var back=document.createElement("div");
//设置背景div的id
back.id="back";
//样式字符串
var styleStr="top:0px;left:0px;position:absolute;background:#003973;width:"+bWidth+"px;height:"+bHeight+"px;";
styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";
//给背景div设置样式
back.style.cssText=styleStr;
//将背景div加入到body中
document.body.appendChild(back);
//调用让背景渐渐变暗的方法
showBackground(back,50);
//创建消息层
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><img src='images/closeImg.gif' onClick='closeWindow();' alt='关闭'/></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";
styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";
mesW.style.cssText=styleStr;
//添加到body中
document.body.appendChild(mesW);
}
/*
*让背景渐渐变暗
* obj ---背景层对象
* endInt ---变暗效果的参数
**/
function showBackground(obj,endInt) {
if(isIe) {
obj.filters.alpha.opacity+=1;
if(obj.filters.alpha.opacity<endInt) {
setTimeout(function(){showBackground(obj,endInt)},5);
}
}else{
var al=parseFloat(obj.style.opacity);al+=0.01;
obj.style.opacity=al;
if(al<(endInt/100)) {
setTimeout(function(){showBackground(obj,endInt)},5);
}
}
}
//关闭窗口
function closeWindow() {
if(document.getElementById('back')!=null) {
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null){
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
if(isIe){
setSelectState('');
}
}
zhou_20080301 2008-07-18
- 打赏
- 举报
UP一下
s_liangchao1s 2008-07-18
- 打赏
- 举报
<HTML><HEAD>
<META content="MSHTML 6.00.2800.1586" name=GENERATOR></HEAD>
<BODY><INPUT onclick="sAlert('测试效果<br/>还可以直接书写HTML代码 <br/>© 2006');" type=button value=点击这里>
<SCRIPT language=javascript type=text/javascript>
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//提示窗口的宽度
msgh=100;//提示窗口的高度
bordercolor="#336699";//提示窗口的边框颜色
titlecolor="#99CCFF";//提示窗口的标题颜色
var sWidth,sHeight;
sWidth=document.body.offsetWidth;
sHeight=document.body.offsetHeight;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#777";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.position="absolute";
msgObj.style.background="white";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.width=msgw + "px";
msgObj.style.height=msgh + "px";
msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px";
msgObj.style.left=(sWidth-msgw)/2 + "px";
var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="关闭";
title.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
}
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var txt=document.createElement("p");
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.innerHTML=str;
document.getElementById("msgDiv").appendChild(txt);
}
</SCRIPT>
</BODY></HTML>
是这个不？
