javascript
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.οnmοusemοve=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.οnmοusemοve=null;
}
</script>
</head>
<body>
<a class="showWindow" href="javascript:showWindow()">點擊這里</a>打開窗口<br />
</body>
</html>
轉載于:https://www.cnblogs.com/a546558309/archive/2011/09/13/2174721.html
總結
以上是生活随笔為你收集整理的javascript弹出div(一)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C#泛型列表List实现二维数组的功能（
- 下一篇： 深入理解JavaScript系列（27）