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="关闭" />

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

  1. 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. 2、弹出窗口 Alert

    1.只是弹出框 /* --- page1.html ---*/ <ion-navbar *navbar> <ion-title>Tab 1</ion-title> ...

  6. JS实现当前页弹出窗口,且页面变灰不可操作

    使用JS在当前页面在div中加载弹出窗口,并让当前页面变灰不可操作. 加载弹出窗口的div需将宽高设置成整个页面的大小,以覆盖当前页面的内容. opacity:0.6: 页面可见度设置为0.6(1为完 ...

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

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

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

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

  9. JS编写类似弹出窗口样式显示层

    JSp中增加div <!-- 提交变更申请 --> <div id="changeWindow" class="easyui-window" ...

随机推荐

  1. jdbc中的Statement对象和Preparedstatement对象的区别,以及通过jdbc操作调用存储过程

    一. java.sql.*   和  javax.sql.*的包的类结构 |- Driver接口: 表示java驱动程序接口.所有的具体的数据库厂商要来实现此接口. |- connect(url, p ...

  2. 【COGS1384】鱼儿仪仗队

    [题目描述] Jzyz的池塘里有很多条鱼,鱼儿们现在决定组成一个仪仗队.现在备选的N(1 <= N <= 100,000)条鱼排成了一条直线,并且按照亲近关系排的队伍,鱼儿的顺序不能改变, ...

  3. JavaScript设计模式之建造者模式

    一.建造者模式模式概念 建造者模式可以将一个复杂的对象的构建与其表示相分离,使得同样的构建过程可以创建不同的表示.也就是说如果我们用了建造者模式,那么用户就需要指定需要建造的类型就可以得到它们,而具体 ...

  4. 栈的顺序存储方式的C语言实现

    /* 编译器:Dev-c++ 5.4.0 文件名:stack.cpp 代码版本号:1.0 时间:2015-10-10 20:08:54 */ #include <stdio.h> #inc ...

  5. (转:亲测)cnblogs博文浏览[推荐、Top、评论、关注、收藏]利器代码片段

    authour: Others(hoojo) updatetime: 2015-04-25 09:30:23 friendly link: http://www.cnblogs.com/hoojo/a ...

  6. Spring ApplicationContext的国际化支持

    ApplicationContext接口继承MessageSource接口,因此具备国际化功能.下面是MessageSource接口定义的三个国际化方法. >String getMessage( ...

  7. java中dynamic web project与web project 的区别 [转]

    原帖地址:http://blog.sina.com.cn/s/blog_46726d2401013jlk.html 文章框架: 1.Dynamic  Web Project 概念 2.eclipse ...

  8. 转:使用XHProf优化PHP程序

    原文来自于:http://blog.sina.com.cn/s/blog_665fc8980100l8dq.html XHProf 是 FaceBook 开发的一个函数级别的 PHP 分层分析器. 数 ...

  9. angular2 学习笔记 ( Http 请求)

    refer : https://angular.cn/docs/ts/latest/guide/server-communication.html https://xgrommx.github.io/ ...

  10. GNU Make chapter 2 —— Makefile 介绍

    Makefile是由一系列的rule规则组成,这些rule都遵循以下形式: target ... : prerequisites ... command ... ... target(目标) 一般来说 ...