javascript弹出div(一)
<html>
<head>
<style>
<!--
body{font-family:宋体; font-size:12px; padding:0px; margin:0px;}
.showWindow:hover{color:#FF0000}
.win_bg{background:#CCC; opacity:0.2; filter:alpha(opacity=20); position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:998;}
.winTitle{background:#9DACBF; height:20px; line-height:20px}
.winTitle .title_left{font-weight:bold; color:#FFF; padding-left:5px; float:left}
.winTitle .title_right{float:right}
.winTitle .title_right a{color:#000; text-decoration:none}
.winTitle .title_right a:hover{text-decoration:underline; color:#FF0000}
.winContent{padding:5px;}
-->
</style>
<script language="javascript">
function showWindow(){
if(document.getElementById("divWin"))
{
$("divWin").style.zIndex=999;
$("divWin").style.display="";
}
else
{
var objWin=document.createElement("div");
objWin.id="divWin";
objWin.style.position="absolute";
objWin.style.width="400px";
objWin.style.height="400px";
objWin.style.border="2px solid #AEBBCA";
objWin.style.background="#FFF";
objWin.style.zIndex=999;
document.body.appendChild(objWin);
}
if(document.getElementById("win_bg"))
{
$("win_bg").style.zIndex=998;
$("win_bg").style.display="";
}
else
{
var obj_bg=document.createElement("div");
obj_bg.id="win_bg";
obj_bg.className="win_bg";
document.body.appendChild(obj_bg);
}
var str="";
str+='<div class="winTitle" onMouseDown="startMove(this,event)" onMouseUp="stopMove(this,event)"><span class="title_left">弹出式窗口</span><span class="title_right"><a href="javascript:closeWindow()" title="单击关闭此窗口">关闭</a></span><br style="clear:right"/></div>'; //标题栏
str+='<div class="winContent">这是一个页面内部弹出窗口，使用W3C的createElement()方法和appendChild()方法<br /> 用火狐打开可以拖动窗口(IE拖动可能有问题)</div>'; //窗口内容
$("divWin").innerHTML=str;
}
function closeWindow(){
$("divWin").style.display="none";
$("win_bg").style.display="none";
}
function $(o){
return document.getElementById(o);
}
function startMove(o,e){
var wb;
if(document.all && e.button==1) wb=true;
else if(e.button==0) wb=true;
if(wb)
{
var x_pos=parseInt(e.clientX-o.parentNode.offsetLeft);
var y_pos=parseInt(e.clientY-o.parentNode.offsetTop);
if(y_pos<=o.offsetHeight)
{
document.documentElement.onmousemove=function(mEvent)
{
var eEvent=(document.all)?event:mEvent;
o.parentNode.style.left=eEvent.clientX-x_pos+"px";
o.parentNode.style.top=eEvent.clientY-y_pos+"px";
}
}
}
}
function stopMove(o,e){
document.documentElement.onmousemove=null;
}
</script>
</head>
<body>
<a class="showWindow" href="javascript:showWindow()">点击这里</a>打开窗口<br />
</body>
</html>
