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 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
javascript 避免闭包引发的问题
Mar 17 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
vue和小程序项目中使用iconfont的方法
May 19 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+dbfile开发小型留言本
2006/10/09 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
Jquery 扩展方法
2010/05/06 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
详解python的四种内置数据结构
2019/03/19 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
离职感谢信怎么写
2015/01/22 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
Mysql Show Profile
2021/04/05 MySQL
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript