页面弹出新的图层页面

最新推荐文章于 2022-07-17 17:18:37 发布

weixin_30693183

最新推荐文章于 2022-07-17 17:18:37 发布

阅读量252

点赞数

文章标签： javascript 操作系统 ViewUI

原文链接：http://www.cnblogs.com/flybeijing/archive/2013/01/14/2859799.html

版权

在前一段时间遇到一个问题，就是想设计自己的网站，相处的效果就是类似于操作系统的弹出方式，但是弹出的框框不知道怎么把自己的子页面放入到框框中，后来想到了应用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="width: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="width: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;”了，这个就自己写吧，应该不难了。

转载于:https://www.cnblogs.com/flybeijing/archive/2013/01/14/2859799.html

weixin_30693183

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
页面弹出新的图层页面

在前一段时间遇到一个问题，就是想设计自己的网站，相处的效果就是类似于操作系统的弹出方式，但是弹出的框框不知道怎么把自己的子页面放入到框框中，后来想到了应用iframe来进行，现在先记录下来，等以后要用到时再加上这个方法。页面代码<html><head><style><!--body{font-family:宋体; font-si...
复制链接

扫一扫