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 进行输入框自动匹配字符的小例子
Jun 29 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
基于JavaScript实现年月日三级联动
Jun 22 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面向对象的使用教程 简单数据库连接
2006/11/25 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
PHP实现微信退款功能
2018/10/02 PHP
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
js实现拖拽功能
2017/03/01 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
Python多层装饰器用法实例分析
2018/02/09 Python
python更改已存在excel文件的方法
2018/05/03 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
小学生自我评价范例
2013/09/24 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
2014年计生标语
2014/06/23 职场文书
联谊活动总结
2014/08/28 职场文书
2014年项目工作总结
2014/11/24 职场文书
优秀员工推荐材料
2014/12/20 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS