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 相关文章推荐
各情景下元素宽高的获取实现代码
Sep 13 Javascript
javascript动态加载三
Aug 22 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
原生js轮播特效
May 18 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
Vue自定义指令详解
Jul 28 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
关于Js中new操作符的作用详解
Feb 21 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 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
Python 文件管理实例详解
2015/11/10 Python
python如何获取服务器硬件信息
2017/05/11 Python
python实现图片处理和特征提取详解
2017/11/13 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
暑期实践思想汇报
2014/01/06 职场文书
环保倡议书
2014/04/14 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
普通党员整改措施
2014/10/24 职场文书
调任通知
2015/04/21 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB