python 提示框如何顶层显示_div在最顶层显示----弹出框效果

div显示在最顶层,并且背景层变暗.

效果图如下:

代码:html文件内容如下:

coverDiv.js文件内容如下:

function isIE(){

return (document.all && window.ActiveXObject && !window.opera) ? true : false;

}

var loginDivWidth = 300;

var sign_in_flow = '

function cancelSign(){

document.getElementById("sign_div").style.display = 'none';

document.getElementById("cover_div").style.display = 'none';

document.body.style.overflow = '';

};

function popCoverDiv(){

var coverDiv = document.createElement('div');

document.body.appendChild(coverDiv);

with(coverDiv.style) {

display = 'none';

position = 'absolute';

background = '#CCCCCC';

left = '0px';

top = '0px';

var bodySize = getBodySize();

width = bodySize[0] + 'px'

height = bodySize[1] + 'px';

zIndex = 98;

if (isIE()) {

filter = "Alpha(Opacity=60)";

} else {

opacity = 0.6;

}

}

coverDiv.id = 'cover_div';

}

function getBodySize(){

var bodySize = [];

with(document.documentElement) {

bodySize[0] = (scrollWidth>clientWidth)?scrollWidth:clientWidth;

bodySize[1] = (scrollHeight>clientHeight)?scrollHeight:clientHeight;

}

return bodySize;

}

function popSign(){

var signDiv = document.createElement('div');

document.body.appendChild(signDiv);

with (signDiv.style) {

display = 'none';

cursor='move';

position = 'absolute';

left = (document.documentElement.clientWidth - loginDivWidth)/2 + 'px';

top = (document.documentElement.clientHeight - 300)/2 + 'px';

width = loginDivWidth + 'px';

zIndex = 99;

background = '#FFFFFF';

border = '#66CCFF solid 1px';

}

signDiv.id = 'sign_div';

signDiv.align = "center";

document.getElementById("sign_div").innerHTML = sign_in_flow;

}

function popSignFlow() {

document.getElementById("cover_div").style.display = 'block';

document.getElementById("sign_div").style.display = 'block';

document.body.style.overflow = "hidden";

}

//以下是拖拽

var offsetX = 0;

var offsetY = 0;

var currentLeft = 0;

var currentTop = 0;

var isDrag = false;

function stopEvent(evt){

var event = window.event?window.event:evt;

if (event.preventDefault) {

event.preventDefault();

event.stopPropagation();

} else {

event.returnValue = false;

}

}

function drag(){

popCoverDiv();

popSign()

document.getElementById('sign_div').onmousedown = function(evt){

var evt = window.event?window.event:evt;

if ((evt.which && evt.which == 1 ) || (evt.button && evt.button == 1)){

isDrag = true;

offsetX = evt.clientX;

offsetY = evt.clientY;

currentLeft = parseInt(document.getElementById('sign_div').style.left);

currentTop = parseInt(document.getElementById('sign_div').style.top);

}

stopEvent(evt);

}

document.onmousemove = function(evt){

if(isDrag){

var evt = window.event?window.event:evt;

document.getElementById('sign_div').style.left = evt.clientX - offsetX + currentLeft +'px';

document.getElementById('sign_div').style.top = evt.clientY - offsetY + currentTop +'px';

stopEvent(evt);

}

}

document.onmouseup = function(evt){

isDrag = false;

var evt = window.event?window.event:evt;

currentLeft = parseInt(document.getElementById('sign_div').style.left);

currentTop = parseInt(document.getElementById('sign_div').style.top);

stopEvent(evt);

}

}