JS实现弹出居中的模式窗口示例


Posted in Javascript onJune 20, 2016

本文实例讲述了JS实现弹出居中的模式窗口。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS弹出窗口</title>
</head>
<body>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
function OpenDialog(url,w, h) {
 var iTop2 = (window.screen.availHeight - 20 - h) / 2;
 var iLeft2 = (window.screen.availWidth - 10 - w) / 2;
 var params = 'menubar:no;dialogHeight=' + h + 'px;dialogWidth=' + w + 'px;dialogLeft=' + iLeft2 + 'px;dialogTop=' + iTop2 + 'px;resizable=yes;scrollbars=0;resizeable=0;center=yes;location:no;status:no'
 var addDiv = $("<div id = 'tempDiv' style='left:0px;top:0px;position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.4)!important;filter:alpha(opacity = 40);background:#000;z-index:1000;'></div>");
 $(document.body).append(addDiv); //添加一个蒙板作背景
 window.open(url, addDiv, params);
}
OpenDialog("https://3water.com",300,300);
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 Javascript
Jquery优化效率 提升性能解决方案
Sep 06 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 #Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 #Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 #Javascript
JS控制层作圆周运动的方法
Jun 20 #Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 #Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 #Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 #Javascript
You might like
一个实用的php验证码类
2017/07/06 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
python 如何快速复制序列
2020/09/07 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
审核会计岗位职责
2013/11/08 职场文书
语文教育专业推荐信范文
2013/11/25 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python