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 相关文章推荐
JS取文本框中最小值的简单实例
Nov 29 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
Vue实现购物车功能
Apr 27 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
浅谈Vue.set实际上是什么
Oct 17 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
用Flash图形化数据(一)
2006/10/09 PHP
支持oicq头像的留言簿(二)
2006/10/09 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
8个必备的PHP功能开发
2015/10/02 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
基于Bootstrap的网页设计实例
2017/03/01 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
python写的ARP攻击代码实例
2014/06/04 Python
Python操作CouchDB数据库简单示例
2015/03/10 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
Python列表的切片实例讲解
2019/08/20 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
妇科医生自荐信
2013/11/05 职场文书
求职信模板怎么做
2014/01/26 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
学校个人对照检查材料
2014/08/26 职场文书
婚前保证书范文
2015/02/28 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
MySQL中一条update语句是如何执行的
2022/03/16 MySQL