div在最顶层显示----弹出框效果

63 阅读 0 评论 42 点赞

我是靠谱客的博主真实百褶裙，最近开发中收集的这篇文章主要介绍div在最顶层显示----弹出框效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

效果图如下:

代码:

html文件内容如下:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="coverDiv.js"></script>
</head>
<body οnlοad="drag();">
<div>
<input type="button" οnclick="popSignFlow();" value="login"/>
</div>
</body>
</html>

coverDiv.js文件内容如下:

function isIE(){
return (document.all && window.ActiveXObject && !window.opera) ? true : false;
}
var loginDivWidth = 300;
var sign_in_flow = '<div style="background:#FF9900;">Login</div><div>e-mail:*</div><div>'
+ '<input type="text" id="sign_email" maxlength="64" size="30"/>'
+ '</div><div>password:*</div><div><input type="password" size="30"/>'
+ '</div><div><input type="button" value="login" />  '
+ '  <input type="button" value="cancel" οnclick="cancelSign();"/></div>';
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);
}
}

转载于:https://www.cnblogs.com/rmsSpring/archive/2012/03/29/2423646.html