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实现ASP分页函数 HTML分页函数
Sep 22 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
JQuery for与each性能比较分析
May 14 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
Highcharts入门之简介
Aug 02 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
Angular中使用better-scroll插件的方法
Mar 27 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 pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
将python图片转为二进制文本的实例
2019/01/24 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
python的等深分箱实例
2019/11/22 Python
np.random.seed() 的使用详解
2020/01/14 Python
详解Python实现进度条的4种方式
2020/01/15 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
营销与策划专业毕业生求职信
2013/11/01 职场文书
北体毕业生求职信
2014/02/28 职场文书
环保倡议书
2014/04/14 职场文书
团日活动总结报告
2014/06/25 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
从原生JavaScript到React深入理解
2022/07/23 Javascript
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript