zoukankan      html  css  js  c++  java
  • js window.open()弹出窗口参数说明及居中设置

    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="关闭" />
  • 相关阅读:
    十大Intellij IDEA快捷键
    IDEA 在同一目录创建多个项目
    IDEA2017 使用(二)
    idea使用(一)
    js == 与 === 的区别[转]
    Spring Boot(一)
    微服务实战(一):微服务架构的优势与不足
    phpcms:三、头部包含
    phpcms:二、头部尾部包含
    phpcms:一、安装及新建模板
  • 原文地址:https://www.cnblogs.com/huhangfei/p/5000720.html
Copyright © 2011-2022 走看看