<!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" />
<title>无标题文档</title>
<style type="text/css">
html, body{
font-size: 12px;
margin: 0px;
height: 100%;
}
a,a:visited{
color:#39F;
text-decoration:none;
}
a:hover{
color:#F60;
}
#MaskDiv{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
filter:Alpha(Opacity=30);
opacity:0.3;
background-color:#000000;
z-index:101;
text-align:center;
vertical-align:middle;
}
#PopContainer{
z-index:1000;
border:1px solid #eee;
}
/*.Pop{
position:absolute;
top:120px;
left:220px;
border:1px solid red;
width:550px;
overflow:hidden;
height:200px;
}*/
#PopBackground{
position:absolute;
width:100%;
height:10000px;
background:#F00;
opacity:0.5;
filter:Alpha(opacity=50);
left:0;
top:0;
}
#PopClose{
position:relative;
top:0; left:0;
width:100%;
height:20px;
background:#445588;
text-align:right;
cursor:move;
}
#PopClose span{
margin-right:0px;
font-size:18px;
border:#2D66C4 1px solid;
background-color:#E4EEFF;
display:inline-block; /*使span样式属性width生效*/
width:18px;
height:18px;
text-align:center;
font-weight:bold;
cursor:pointer;
color:#0E377A;
}
#PopContent{
height:auto;
width:100%;
position:relative;
background:#FFF;
}
</style>
<script language="javascript" type="text/javascript">
<!--
//定义全局变量
//判断浏览器是否为IE
var IsIE=(document.all)?true :false;
//x,y分别表示层div边框距顶部和左边的距离
var x=y=0;
var ms="";
//顶一个层
var newDiv;
//弹出方法
function testMessageBox() {
//防止重复创建
if(newDiv)
{
return;
}
zzdiv=document.createElement("div");
zzdiv.id="MaskDiv";
document.body.appendChild(zzdiv);
newDiv=document.createElement("div"); //创建一个div
newDiv.id="PopContainer";
newDiv.style.cssText="position:absolute;top:120px;left:220px;width:550px;overflow:hidden;";
/* start 使用cssText设置样式*/
/* str="position:absolute;top:120px;left:220px;border:1px solid red;width:550px;overflow:hidden; height:200px;";
if(IsIE)
{
newDiv.style.cssText=str; //for IE、FF
}
else
{
newDiv.setAttribute("style",str); //for FF
}*/
/* end */
/*start 使用setAttribute()来设置样式,其中参数Pop为样式表中的类名*/
/*newDiv.setAttribute("class","Pop"); //for FF
newDiv.setAttribute("className","Pop"); //for IE*/
/* end */
//newDiv.className="Pop"; //FF、IE通用
document.body.appendChild(newDiv);
var backdiv=document.createElement("div");
backdiv.id="PopBackground";
newDiv.appendChild(backdiv);
var closediv=document.createElement("div");
closediv.id="PopClose";
closediv.onmousedown=function(){ Move(event,"PopContainer");}
closediv.innerHTML="<span title='Esc快捷键' onclick='dclose()'>×</span>";
newDiv.appendChild(closediv);
var contentdiv=document.createElement("div");
contentdiv.id="PopContent";
contentdiv.innerHTML="你好Z<br/>Z<br/>Z<br/>Z<br/>Z<br/>Z<br/>Z<br/>你好Z<br/>Z<br/>你好Z<br/>Z<br/>你好Z<br/>Z<br/>你好Z<br/>Z<br/>你好Z<br/>Z<br/>你好Z<br/>Z<br/>你好Z<br/>Z<br/>你好Z<br/>Z<br/>你好Z<br/>Z<br/>";
newDiv.appendChild(contentdiv);
}
//关闭弹出层
function dclose(){
if(newDiv)
{
newDiv.parentNode.removeChild(newDiv);
newDiv = null;
document.getElementById("MaskDiv").parentNode.removeChild(document.getElementById("MaskDiv"));
}
}
//拖拽图层
var ms = 0;
function Move(event, obj) {
event = event || window.event;
ms = obj;
//alert(event)
x = parseInt(document.getElementById(ms).style.left) - event.clientX;
y = parseInt(document.getElementById(ms).style.top) - event.clientY;
//alert(parseInt(document.getElementById(ms).style.left))
} document.onmousemove = function(event) {
event = event || window.event;
if (ms) {
document.getElementById(ms).style.left = (x + event.clientX) + 'px';
document.getElementById(ms).style.top = (y + event.clientY) + 'px';
//document.getElementById(ms).innerHTML = event.x;
}
} document.onmouseup = function(event) {
event = event || window.event;
if (ms) {
//target.releaseCapture();
ms = "";
}
}
-->
</script>
</head>
<body>
<div style="text-align: left"><a href="#none" onclick="testMessageBox();">弹出窗口</a></div>
</body>
</html>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货