目的

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

实现

main.html

<!DOCTYPE html>

<html>

<head><meta charset="utf-8"/></head>

<body>

<a href="" id="a1" target="new">新窗口</a>

<div id="msg"></div>

<script>

    var a1 = document.getElementById('a1');

    a1.onclick = function(){

        window.open('alert.html', 'new', 'location=no, toolbar=no');

        return false;

    }

</script>

</body>

</html>

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

alert.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8"/>

    </head>

    <body>

        <input type="text" name="message" id="m1"/><br/>

        <input type="button" id="btn" value="关闭"/><br/>

        <script type="text/javascript">

            var btn = document.getElementById('btn');

            var message = document.getElementById('m1');

            btn.onclick = function(){

                var div = window.opener.document.getElementById('msg');

                div.innerHTML = message.value;

                window.close();

            };

        </script>

    </body>

</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为允许；

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

效果图：

<div id="b3" class="btn wow fadeInUpBig" data-wow-delay="1.0s">

      <a class="wei-xin" href="javascript:void(0)" target="new" title="添加微信"><i class="fa fa-weixin"></i></a>

      <div id="msg"></div>

</div>
//微信子窗口

    var b3 = document.getElementById('b3');

    var windowTop = (window.screen.height-)/;

    var windowSide = (window.screen.width-)/;

    var windeowparameter = 'height=300, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no';

    windeowparameter += ','+'top='+windowTop;

    windeowparameter +=','+'left='+windowSide;

    b3.onclick = function(){

        // alert(windeowparameter)

        window.open('__MODULE__/Index/alert', 'new', windeowparameter);

        return false;

    }

拓展：涉及到的宽高

页可见区域宽： document.body.clientWidth;

网页可见区域高： document.body.clientHeight;

网页可见区域宽： document.body.offsetWidth (包括边线的宽);

网页可见区域高： document.body.offsetHeight (包括边线的宽);

网页正文全文宽： document.body.scrollWidth;

网页正文全文高： document.body.scrollHeight;

网页被卷去的高： document.body.scrollTop;

网页被卷去的左： document.body.scrollLeft;

网页正文部分上： window.screenTop;

网页正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;

屏幕分辨率的宽： window.screen.width;

屏幕可用工作区高度： window.screen.availHeight;  


.

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. Python FAQ2：赋值、浅拷贝、深拷贝的区别？

    在Python编程过程中,经常会遇到对象的拷贝,如果不理解浅拷贝和深拷贝的概念,你的代码就可能出现一些问题.所以,在这里按个人的理解谈谈它们之间的区别. 一.赋值(assignment) 在<P ...

  2. python练习-跳出多层循环和购物车

    跳出多层循环:三层循环,最里层直接跳出3层 在Python中,函数运行到return这一句就会停止,因此可以利用这一特性,将功能写成函数,终止多重循环 def work(): for i in ran ...

  3. leetcode第一刷_Spiral Matrix

    我认为这个题好无聊啊,好端端一个数组.干嘛要跟比巴卜一样转一圈输出呢. . 思想非常easy,每次从左到右.再从上到下,在从右到左,再从下到上.问题是每次到什么时候该改变方向.我的做法是用一个变量保存 ...

  4. _stdcall与_cdecl

    _cdecl(C Declaration的缩写)是C/C++和MFC程序默认使用的调用约定,因此可以省略,也可以在函数声明时加上_cdecl关键字来手工指定.采用_cdecl约定时,函数参数按照从右到 ...

  5. Android 自己定义UI圆角button

    Android实际开发中我们一般须要圆角的button,普通情况下我们能够让美工做出来对应的button图片.然后放上去就可以,另外我们能够在布局文件里直接设置,也能够达到一样的效果. 以下解说在布局 ...

  6. 金典 SQL笔记 SQL语句汇总

    SELECT * FROM (SELECT ROW_NUMBER() OVER ( ORDER BY id) AS rowN,FNumber, FName,FSalary ,Fage FROM dbo ...

  7. leecode 题解 || Merge k Sorted Lists 问题

    problem: Merge k sorted linked lists and return it as one sorted list. Analyze and describe its comp ...

  8. oc73--NSArray使用

    // // main.m // NSArray和NSString之间转换 #import <Foundation/Foundation.h> int main(int argc, cons ...

  9. 第一篇 Windows 8 开发Windows Metro style app环境配置

    半   饱问 题 到 我 这 里 为 止! 第一篇 Windows 8 开发Windows Metro style app环境配置 2012-09-24 08:24 by 半饱, 1289 阅读, 3 ...

  10. Scala 是一门怎样的语言，具有哪些优缺点？

    保罗·格雷厄姆在<黑客与画家>中写道,Java属于B&D(捆绑与束缚)类型的语言.为何束缚手脚?因为要让新手和明星程序员写出类似质量的代 码,尽可能的抹消人的才华对程序的影响.不同 ...