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 相关文章推荐
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
vue配置多页面的实现方法
May 22 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 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
thinkphp中memcache的用法实例
2014/11/29 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
javascript call方法使用说明
2010/01/11 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
python 实现归并排序算法
2012/06/05 Python
列举Python中吸引人的一些特性
2015/04/09 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
python3实现名片管理系统
2020/11/29 Python
python mysql断开重连的实现方法
2019/07/26 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
工程测量与监理专业应届生求职信
2013/11/27 职场文书
培训讲师岗位职责
2014/04/13 职场文书
分公司负责人任命书
2014/06/04 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
个人作风建设自查报告
2014/10/22 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL