window.open()打开弹窗居中显示

我们知道,window.open()如果不设置样式的话,弹出窗体的时候都是小小的一块在左上角,所以我们使用的时候通常要添加样式,而居中显示是符合现代审美与使用习惯的关键一点。

function openWin(url, name, iWidth, iHeight) {
    var url; // 转向网页的地址;
    var name; // 网页名称,可为空;
    var iWidth; // 弹出窗口的宽度;
    var iHeight; // 弹出窗口的高度;
    // window.screen.height获得屏幕的高,window.screen.width获得屏幕的宽
    var iTop = (window.screen.height - 30 - iHeight) / 2; // 获得窗口的垂直位置;
    var iLeft = (window.screen.width - 10 - iWidth) / 2; // 获得窗口的水平位置;
    window.open(url, name, ‘height=‘ + iHeight + ‘,innerHeight=‘ + iHeight
    + ‘,width=‘ + iWidth + ‘,innerWidth=‘ + iWidth + ‘,top=‘ + iTop + ‘,left=‘ + iLeft
    + ‘,toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no‘);
}

封装成一个函数,方便以后调用。

"喜欢一个人是藏不住的。"

原文地址:https://www.cnblogs.com/yanggb/p/12335033.html

时间: 2024-08-01 13:18:30

window.open()打开弹窗居中显示的相关文章

easyUI dialog 弹窗 居中显示

默认情况下应该是在屏幕居中显示的.但是有的时候没有居中只要重新纠正下就可以了 $('#add_dialog').dialog('open'); //打开添加对话框 $('#add_dialog').window('center');//使Dialog居中显示

网页弹窗居中显示

让网页中的一个弹窗居中显示 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta htt

让easyui的window在页面中居中显示

RT $('#zzqhylbView').window("resize",{top:$(document).scrollTop() + ($(window).height()-250) * 0.5});//居中显示

Js打开网页后居中显示

使用JavaScript定义打开网页后居中显示,并可为窗口设置大小,使用“window.open”方法打开新窗口:先来看完整的代码及调用方法: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>打开居中的窗口</title> <script language="javascript"> //参数-url:要打开的网站,winname:打开后

JavaScript基础 window.open(url,name,options) 弹出一个 新窗口 屏幕居中显示 获取屏幕的有效宽度

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

JavaScript特效实例005-控制弹出窗口居中显示

实例005                控制弹出窗口居中显示 实例说明 点击页面上的按钮,弹出窗口,并将窗口居中显示. 技术要点 本例首先应用JavaScript中的window对象的open()方法,打开指定大小的新窗口,然后通过screen对象,获取屏幕分辨率,再根据获取的值通过window对象的moveTo()方法,将新窗口移动到屏幕居中位置. moveTo()方法将窗口移动到指定坐标(x,y)处,其语法格式如下. window.moveTo(x,y) 其中,参数x,y表示窗口移动到的位

关于大图片居中显示~适应移动端

今天修改项目的时候碰到一个问题,移动端点击小图片后,打开一个大图片显示:由于这个大图片的比例是不确定的,所以如何显示就成了一个问题. 最初的这个功能是设置了一个css3的属性,然后在Android手机上出了问题, -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; 然后我查了一下这个属性: 因为版本的原因,一些Android机没法使用这个属性. 我找了找居中显示的资料,看了看百度图片的图片显示方

css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px,当图片宽度大于显示屏的宽度时)

1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div  设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title&

设定div始终居中显示

<script type="text/javascript"> (function($){ $.fn.extend({ center:function(options){ //center插件 var options=$.extend({ //默认属性值 inside:window, //元素居于窗体中心 transition:0, //元素居中移动时的时间,单位是millisecond minX:0, //元素最小X方向距边值 minY:0, //元素最小Y方向距边值 w