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动态调整iframe高度的代码
Apr 10 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
Angular6中使用Swiper的方法示例
Jul 09 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
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
Python日期操作学习笔记
2008/10/07 Python
python 日志增量抓取实现方法
2018/04/28 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
Python变量访问权限控制详解
2019/06/29 Python
python之生成多层json结构的实现
2020/02/27 Python
python3 xpath和requests应用详解
2020/03/06 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
生产总经理岗位职责
2013/12/19 职场文书
平民服装店创业计划书
2014/01/17 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
借钱欠条怎么写
2015/07/03 职场文书
请病假条范文
2015/08/17 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers