目的

在一个主窗口中,点击一个链接, 弹出一个子窗口 , 父窗口保留 
在子窗口中点击关闭, 关闭子窗口. 子窗口的位置位于屏幕的中间

实现

main.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head><meta charset="utf-8"/></head>
  4. <body>
  5. <a href="" id="a1" target="new">新窗口</a>
  6. <div id="msg"></div>
  7. <script>
  8.     var a1 = document.getElementById('a1');
  9.     a1.onclick = function(){
  10.         window.open('alert.html', 'new', 'location=no, toolbar=no');
  11.         return false;
  12.     }
  13. </script>
  14. </body>
  15. </html>

注: location=no 则会弹出一个子窗口, 否则, 会在当前浏览器开启一个新页面 
toolbar=no 使子窗口位于屏幕的中间.

alert.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.     </head>
  6.     <body>
  7.         <input type="text" name="message" id="m1"/><br/>
  8.         <input type="button" id="btn" value="关闭"/><br/>
  9.         <script type="text/javascript">
  10.             var btn = document.getElementById('btn');
  11.             var message = document.getElementById('m1');
  12.             btn.onclick = function(){
  13.                 var div = window.opener.document.getElementById('msg');
  14.                 div.innerHTML = message.value;
  15.                 window.close();
  16.             };
  17.         </script>
  18.     </body>
  19. </html>

相关参数：

window.open 弹出新窗口的命令；
    
    "page.html" 弹出窗口的文件名；
    
    "newwindow" 弹出窗口的名字（不是文件名），非必须，可用空"代替；
    
    height=100 窗口高度；
    
    width=400 窗口宽度；
    
    top=0 窗口距离屏幕上方的象素值；
    
    left=0 窗口距离屏幕左侧的象素值；
    
    toolbar=no 是否显示工具栏，yes为显示；
    
    menubar，scrollbars 表示菜单栏和滚动栏。
    
    resizable=no 是否允许改变窗口大小，yes为允许；
    
    location=no 是否显示地址栏，yes为允许；
    
    status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

   案例：微信二维码居中弹窗

效果图：

  1. <div id="b3" class="btn wow fadeInUpBig" data-wow-delay="1.0s">
  2.       <a class="wei-xin" href="javascript:void(0)" target="new" title="添加微信"><i class="fa fa-weixin"></i></a>
  3.       <div id="msg"></div>
  4. </div>
  1. //微信子窗口
  2.     var b3 = document.getElementById('b3');
  3.     var windowTop = (window.screen.height-)/;
  4.     var windowSide = (window.screen.width-)/;
  5.     var windeowparameter = 'height=300, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no';
  6.     windeowparameter += ','+'top='+windowTop;
  7.     windeowparameter +=','+'left='+windowSide;
  8.     b3.onclick = function(){
  9.         // alert(windeowparameter)
  10.         window.open('__MODULE__/Index/alert', 'new', windeowparameter);
  11.         return false;
  12.     }

拓展：涉及到的宽高

  1. 页可见区域宽： document.body.clientWidth;
  2. 网页可见区域高： document.body.clientHeight;
  3. 网页可见区域宽： document.body.offsetWidth (包括边线的宽);
  4. 网页可见区域高： document.body.offsetHeight (包括边线的宽);
  5. 网页正文全文宽： document.body.scrollWidth;
  6. 网页正文全文高： document.body.scrollHeight;
  7. 网页被卷去的高： document.body.scrollTop;
  8. 网页被卷去的左： document.body.scrollLeft;
  9. 网页正文部分上： window.screenTop;
  10. 网页正文部分左： window.screenLeft;
  11. 屏幕分辨率的高： window.screen.height;
  12. 屏幕分辨率的宽： window.screen.width;
  13. 屏幕可用工作区高度： window.screen.availHeight;  
  3. .

JS弹出子窗口的更多相关文章

  1. WPF FileFolderDialog 和弹出子窗口的一些问题

    摘要:本文主要是WPF中 FileFolderDialog的相关问题,补充了关于在父窗口弹出子窗口,以及子窗口的相关属性(Data Binding)和命令绑定(Delegate Command)问题, ...

  2. pyqt5对用qt designer设计的窗体实现弹出子窗口的示例

    pyqt5对用qt designer设计的窗体实现弹出子窗口的示例 脚本专栏 python 1. 用qt designer编写主窗体,窗体类型是MainWindow,空白窗口上一个按钮.并转换成mai ...

  3. JS弹出模态窗口下拉列表特效

    效果体验:http://hovertree.com/texiao/js/20/ 或者扫描二维码在手机体验: 点击选择城市后,在弹出的层中的输入框,输入英文字母 h,会有HoverTree和Hewenq ...

  4. fancybox 关闭弹出窗口 parent.$.fancybox.close(); 无反应 fancybox 关闭弹出窗口父页面自动刷新,弹出子窗口前后事件

    当我们在父页面使用 fancybox 弹出窗口后,如果想自己手动关闭,则可以 function Cancel() { parent.$.fancybox.close(); } 如果关闭没有反应,最好看 ...

  5. JS 弹出模态窗口解决方案

    最近在项目中使用弹出模态窗口,功能要求: (1)模态窗口选择项目 (2)支持选择返回事件处理 在IE中有showModalDialog 方法,可以很好的解决该问题,但是在Chrome中和FF中就有问题 ...

  6. js 弹出div窗口 可移动 可关闭 （转）

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. js 弹出div窗口 可移动 可关闭

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. JS 弹出小窗口

    弹出窗口函数 function openwindow(url,name,iWidth,iHeight){ var url; //转向网页的地址; var name; //网页名称,可为空; var i ...

  9. asp.net下用js实现弹出子窗口选定值并返回

    对应上一篇博客代码: 父页面: <head runat="server"> <meta http-equiv="X-UA-Compatible" ...

随机推荐

  1. ubuntu 网络监控 nethogs

    ***网络监控ubuntu自带的 netstat -an 查看当前网络状况 sudo netstat -anp 查看当前网络状况带对应进程号 traceroute 追踪路由 ***我比较喜欢用Neth ...

  2. 怎样对Android设备进行网络抓包

    问题描写叙述: 前段时间自己的app訪问server的url总是会出现间接性失败的问题,于是和server的同事开了个会.提出了他们server存在的这个bug,我的同事自然说自己的server没问题 ...

  3. 【poj 1724】 ROADS 最短路（dijkstra+优先队列）

    ROADS Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12436 Accepted: 4591 Description N ...

  4. handbook/CentOS/使用免费SSL证书让网站支持HTTPS访问.md

  5. Area of Polycubes

    http://poj.org/problem?id=3792 题意:给出n个小正方体的中心坐标,求构成的多重小立方体的表面积.要求输入的下一个小正方体必须与之前的正方体有一个面是相交的.如果不满足条件 ...

  6. IE下a标签会触发window.onbeforeunload的问题

    今天同事发现一个问题,在我做的控件中,点击tab切换的时候,IE上会触发他页面上的onbeforeunload的事件.一开始以为是我控件上事件导致的,但是当我把所有的绑定事件取消以后,问题依然存在.我 ...

  7. Akka源码分析-Cluster-ActorSystem

    前面几篇博客,我们依次介绍了local和remote的一些内容,其实再分析cluster就会简单很多,后面关于cluster的源码分析,能够省略的地方,就不再贴源码而是一句话带过了,如果有不理解的地方 ...

  8. akka设计模式系列-慎用ask

    慎用ask应该是Akka设计的一个准则,很多时候我们应该禁用ask.之所以单独把ask拎出来作为一篇博文,主要是akka的初学者往往对ask的使用比较疑惑. "Using ask will ...

  9. linux 如何查看进程的执行时间

    ps  -ef|grep wo.php 得到 程序的pid 如 123 ps -p 123 -o etime

  10. jQueryTools-Scrollable.js

    转载一篇例子,学习使用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...