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 播放器 控制
Jan 22 Javascript
JavaScript 特殊字符
Apr 05 Javascript
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
Jquery $when done then的用法详解
May 20 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
写给新手同学的vuex快速上手指北小结
Apr 14 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 Javascript
React自定义hook的方法
Jun 25 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
Python采用raw_input读取输入值的方法
2014/08/18 Python
python访问系统环境变量的方法
2015/04/29 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
机器学习python实战之手写数字识别
2017/11/01 Python
python3实现表白神器
2019/04/09 Python
python远程邮件控制电脑升级版
2019/05/23 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
四风问题个人对照检查剖析材料
2014/09/27 职场文书
师范生见习报告范文
2014/11/03 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
孔繁森观后感
2015/06/10 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python