目的

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

实现

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. HDUJ 2070 Fibbonacci Number

    Fibbonacci Number Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  2. Android高仿UC浏览器和360手机卫士消息常驻栏(通知栏)

    之前网上看了下自己定义消息栏,通知栏,了解到了Notification这个控件.发现UC浏览器等都是这样的类型,今天写个demo实现下.如图: 当中每一个button都有不同的功能.代码例如以下: p ...

  3. xcode,git tips

    change organization name 选中project or target,最右侧Utilities面板->Project Document 修改source folder名字 - ...

  4. 【转】ACM 2567 -- 树的Prufer编码

    本文介绍北京大学ACM网站2567号题目的解法.介绍部分基本翻译自网站上的题目介绍. 题目介绍:    给定一棵各节点编号为整数1,2,3...n的树(例如,无环连通图),其Prufer编码(Pruf ...

  5. 对腾讯云服务器linux系统进行分区格式化操作

  6. 浅谈IO优化

    三层结构 磁盘(存储).VM(卷管理)和文件系统.专有名词不好理解,打个比方说:磁盘就相当于一块待用的空地:LVM相当于空地上的围墙(把空地划分成多个部分):文件系统则相当于每块空地上建的楼房(决定了 ...

  7. 使用GitHub(转载)

    转自:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137628548491 ...

  8. js产生随机数教程

    <script>   function GetRandomNum(Min,Max){   var Range = Max - Min;   var Rand = Math.random() ...

  9. Treap(模板)

    人生第一次平衡树,Treap板子 #include<iostream> #include<cstdio> #include<cstring> #include< ...

  10. keystone身份认证服务

    Keystone介绍 keystone 是OpenStack的组件之一,用于为OpenStack家族中的其它组件成员提供统一的认证服务,包括身份验证.令牌的发放和校验.服务列表.用户权限的定义等等.云 ...