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 判断 object 的特定类转载
Feb 01 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
JS实现音乐导航特效
Jan 06 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
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/02 日漫
PHP 万年历实现代码
2012/10/18 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
JavaScript闭包详解
2015/02/02 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
介绍一下RMI的基本概念
2016/12/17 面试题
几个常见的消息中间件(MOM)
2014/01/08 面试题
关于环保的建议书400字
2014/03/12 职场文书
应聘英语教师求职信
2014/04/24 职场文书
爱我中华教学反思
2014/04/28 职场文书
会计个人实习计划书
2014/08/15 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL
Redis实现短信验证码登录的示例代码
2022/06/14 Redis