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前端图片加载管理器imagepool使用详解
Dec 29 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
Boostrap入门准备之border box
May 09 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
使用Typescript开发微信小程序的步骤详解
Jan 12 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页面间传递参数实例代码
2008/06/05 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
一个超级简单的python web程序
2014/09/11 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
浅析Git版本控制器使用
2017/12/10 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
简单了解python变量的作用域
2019/07/30 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
python进度条显示之tqmd模块
2020/08/22 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
临床医学应届生求职信
2013/11/06 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
项目合作协议书
2014/09/23 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技