在前一段时间遇到一个问题，就是想设计自己的网站，相处的效果就是类似于操作系统的弹出方式，但是弹出的框框不知道怎么把自己的子页面放入到框框中，后来想到了应用iframe来进行，现在先记录下来，等以后要用到时再加上这个方法。
页面代码
<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 type="text/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="520px"; objWin.style.height="220px"; 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)"><a href="#" class="title_left">弹出式窗口</a><span class="title_right"><a href="javascript:closeWindow()" title="单击关闭此窗口">关闭</a></span><br style="clear:right"/></div>'; //标题栏 str+='<div class="winContent"><iframe id="newpage" name="newpage" src="aaa.html" scrolling="auto" FRAMEBORDER="0" style="100%; height:100%;"></iframe></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>
这个在页面点击了标签以后就会调用到方法中去，第一个判断是为了新建弹出的框，和添加背景颜色的
判断是否点击
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="520px"; objWin.style.height="220px"; 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); }
在下面的这个是为了添加出窗口的效果，这时候我们就可以吧子页面放到str第二次添加的div中的iframe路径上了。当然关闭的方法也在拼接div的同时添加到了div上
添加框框的样子
var str=""; str+='<div class="winTitle" onMouseDown="startMove(this,event)" onMouseUp="stopMove(this,event)"><a href="#" class="title_left">弹出式窗口</a><span class="title_right"><a href="javascript:closeWindow()" title="单击关闭此窗口">关闭</a></span><br style="clear:right"/></div>'; //标题栏 str+='<div class="winContent"><iframe id="newpage" name="newpage" src="aaa.html" scrolling="auto" FRAMEBORDER="0" style="100%; height:100%;"></iframe></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; }
好了，这样就整体实现了。如果要跳出多个窗口的话，就在创建的时候再多添加一个方法，就是改变一下每个窗口的“$("divWin").style.zIndex=999;”了，这个就自己写吧，应该不难了。