window.open()可以弹出一个新的窗口,并且通过参数控制窗口的各项属性。

最基本的弹出窗口代码

window.open('httP://codeo.cn/');

window.open()各参数详解

示例代码:

window.open('httP://codeo.cn/', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')

各参数详解

‘httP://codeo.cn/’ :弹出窗口的地址;
‘newwindow’ : 弹出窗口的名字(不是文件名),非必须,可用空”代替;
height=100 : 窗口高度;
width=400 : 窗口宽度;
top=0 : 窗口距离屏幕上方的象素值;
left=0 : 窗口距离屏幕左侧的象素值;
toolbar=no : 是否显示工具栏,yes为显示;
menubar,scrollbars : 表示菜单栏和滚动栏。
resizable=no : 是否允许改变窗口大小,yes为允许;
location=no : 是否显示地址栏,yes为允许;
status=no : 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;

弹出窗口居中方法

function openWin(url,name,iWidth,iHeight) {
//获得窗口的垂直位置
var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
//获得窗口的水平位置
var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
window.open(url, name, 'height=' + iHeight + ',innerHeight=' + iHeight + '
        ,width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + '
        ,status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no');
}

如何关闭弹出窗口?

在新打开页面中执行代码:

window.opener = null; window.open('', '_self'); window.close();

新窗口中关闭代码如下:

<input type="button" onclick="window.opener = null; window.open('', '_self'); window.close();" value="关闭" />

window.open()弹出窗口参数说明及居中设置的更多相关文章

  1. js window.open()弹出窗口参数说明及居中设置

    window.open()可以弹出一个新的窗口,并且通过参数控制窗口的各项属性. 最基本的弹出窗口代码 window.open('httP://codeo.cn/'); window.open()各参 ...

  2. 让IE8在win7下面能显示使用window.showmodaldialog弹出窗口的地址状态栏

    问题来源:最近又要对老的系统进行改善,由于用到了window.showmodaldialog这个方法弹出窗口,比如从主界面弹出新增或者修改窗口,如下图所示,显示没有地址栏,进行代码修改还要找到相应的文 ...

  3. window.open()弹出窗口防止被禁

    window.open(),顾名思义,是指在当前浏览器窗口弹出另一个浏览器窗口. 因为多种原因,浏览对window.open弹出的窗口做了多方限制.限制不同,肯定会造成各浏览器弹出窗口的差异. 大部分 ...

  4. 关于window.open弹出窗口被阻止的问题

    原文:http://blog.csdn.net/fanfanjin/article/details/6858168 在web编程过程中,经常会遇到一些页面需要弹出窗口,但是在服务器端用window.o ...

  5. window.open弹出窗口调用controller

    前台图片调用js函数 <img src='${pageContext.request.contextPath}/FlatUI/img/link.png' id='report' alt='&qu ...

  6. window.open()弹出窗口被拦截

    之前有个需求是输入一些配置,然后点击预览,通过接口保存配置并返回预览页面链接,在新页面中打开链接.后来测试一直说没有新页面打开,我一看,原来是被浏览器拦截了. 原因如下: 浏览器只有在认为click和 ...

  7. Example005控制弹出窗口居中显示

    <!-- 实例005控制弹出窗口居中显示 --> <head> <meta charset="UTF-8"> </head> < ...

  8. JavaScript BOM-11-BOM的核心-window对象; window对象的控制,弹出窗口方法; 超时调用; 间歇调用; location对象常用属性; 位置操作--location.reaplace,location.reload(); BOM中的history对象; Screen对象及其常用属性; Navigator对象;

    JavaScript BOM 学习目标 1.掌握什么是BOM 2.掌握BOM的核心-window对象 3.掌握window对象的控制.弹出窗口方法 什么是bom BOM(browser object ...

  9. Add an Action that Displays a Pop-up Window 添加显示弹出窗口按钮

    In this lesson, you will learn how to create an Action that shows a pop-up window. This type of Acti ...

随机推荐

  1. 《TCP/IP详解卷一:协议》数据链路层(一)

    版权声明:本文为博主原创文章,转载请标注转载链接,谢谢.   目录(?)[+]   引言         在TCP/IP协议族中,链路层主要有三个目的: 为IP模块发送和接收IP数据报. 为ARP模块 ...

  2. ubuntu 18.04 设置中文输入法

    有下面几种常用选择: IBus拼音:sudo apt-get install ibus-pinyin IBUS五笔:sudo apt-get install ibus-table-wubi 谷歌拼音输 ...

  3. Maven查找添加方式

    可以通过以下链接 : https://mvnrepository.com/

  4. CodeForces 467D(267Div2-D)Fedor and Essay (排序+dfs)

    D. Fedor and Essay time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  5. HDU-6395 多校7 Sequence(除法分块+矩阵快速幂)

    Sequence Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total ...

  6. jmeter压力测试报告

    XXX压力测试报告 时间:2015-08-04                                             测试人员:xxx 目录 XXX压力测试报告... 1 一  测试 ...

  7. Kth Largest Element in a Stream

    Design a class to find the kth largest element in a stream. Note that it is the kth largest element ...

  8. Hyperledger Fabric (1.0)环境部署 chaincode【转】

    三.测试Fabric 其实我们在前面运行./network_setup.sh up的时候系统已经运行了一个Example02的ChainCode测试,部署上去的ChainCodeName是mycc,所 ...

  9. 剑指Offer的学习笔记(C#篇)-- 树的子结构

    题目描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 一 . 二叉树的概念         树形结构是一种典型的非线性结构,除了用于表示相邻关系外,还可 ...

  10. 微信分账功能与微信支付企业付款相关内容详解(payjs版)

    PAYJS开通微信分账功能以来,有很多同学咨询相关情况.很多同学关心有没有什么办法,可以让自己的商户号快速开通企业付款功能.这里就介绍下微信分账的具体相关内容,可以完美解决问题. 一.什么是微信分账? ...