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 相关文章推荐
javascript数组组合成字符串的脚本
Jan 06 Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
jquery实现图片轮播器
May 23 jQuery
angular4中关于表单的校验示例
Oct 16 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
javascript Excel操作知识点
2009/04/24 Javascript
js 编写规范
2010/03/03 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
用实例解释Python中的继承和多态的概念
2015/04/27 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
Python中Threading用法详解
2017/12/27 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
Python Process多进程实现过程
2019/10/22 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
俄罗斯游戏商店:Buka
2020/03/01 全球购物
大学生毕业鉴定
2014/01/31 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
代理协议书
2014/04/22 职场文书
个人担保书格式范文
2014/05/12 职场文书
绘画专业自荐信
2014/07/04 职场文书
2014年资料员工作总结
2014/11/18 职场文书