html 层半透明,给页面加一层半透明div，禁用页面所有功能

系统中有个功能用户点击一个按钮要调用webservice，可能会等待较长时间，如果用户不耐烦，再点按钮或点击别的功能就乱套了

想到屏蔽页面所有功能，思路是用户点击按钮，调用一个javascript方法，显示预先在页面中定义好的隐藏div，返回结果后再隐藏div，允许用户继续操作。

==========================================================

半透明div

.#mask {

visibility: hidden;

background-color: #cccccc;

left: 0px;

position: absolute;

top: 0px;

background-image: none;

filter: alpha(opacity :   50);

}

.#dialog {

visibility: hidden;

background-color: #f7fcfe;

z-index: 100;

width: 300px;

height: 50px;

position: absolute;

text-align: center;

font-size: 30px;

color: #FF0000;

font-weight: bold;

vertical-align: middle;

}

function show()

{

var d_mask=document.getElementById('mask');

var d_dialog = document.getElementById('dialog');

d_mask.style.width = document.body.clientWidth ;

d_mask.style.height=document.body.clientHeight;

//网页正文全文

//d_mask.style.width = document.body.scrollWidth ;

//d_mask.style.height=document.body.scrollHeight;

d_dialog.style.top = document.body.clientHeight / 2 - 60;

d_dialog.style.left =document.body.clientWidth / 2 -100;

d_mask.style.visibility='visible';

d_dialog.style.visibility='visible';

}

function divBlock_event_mousedown()

{

var e, obj, temp;

obj=document.getElementById('dialog');

e=window.event?window.event:e;

obj.startX=e.clientX-obj.offsetLeft;

obj.startY=e.clientY-obj.offsetTop;

document.οnmοusemοve=document_event_mousemove;

temp=document.attachEvent?document.attachEvent('onmouseup',document_event_mouseup):document.addEventListener('mouseup',document_event_mouseup,'');

}

function document_event_mousemove(e)

{

var e, obj;

obj=document.getElementById('dialog');

e=window.event?window.event:e;

with(obj.style){

position='absolute';

left=e.clientX-obj.startX+'px';

top=e.clientY-obj.startY+'px';

}

}

function document_event_mouseup(e)

{

var temp;

document.οnmοusemοve='';

temp=document.detachEvent?document.detachEvent('onmouseup',document_event_mouseup):document.removeEventListener('mouseup',document_event_mouseup,'');

}

window.onresize = function()

{

var d_mask=document.getElementById('mask');

var d_dialog = document.getElementById('dialog');

d_mask.style.width = document.body.clientWidth ;

d_mask.style.height=document.body.clientHeight;

}

处理中，请等待……

测试

posted on 2008-08-26 22:06 猪 阅读(988) 评论(0)  编辑  收藏