编程 Javascript

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程序设计有所帮助。

JS实现弹出居中的模式窗口示例

- Author -

cherry

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

IE 缓存策略的BUG的解决方法

Jul 21 Javascript

js URL参数的拼接方法比较

Feb 15 Javascript

禁用键盘上的(全局)指定键兼容iE、Chrome、火狐

May 14 Javascript

jQuery实现的AJAX简单弹出层效果代码

Nov 26 Javascript

JavaScript Array对象详解

Mar 01 Javascript

浅谈JavaScript的push(),pop(),concat()方法

Jun 03 Javascript

jQuery简单实现iframe的高度根据页面内容自适应的方法

Aug 01 Javascript

AngularJS基础 ng-keyup 指令简单示例

Aug 02 Javascript

jQuery与js实现颜色渐变的方法

Dec 30 Javascript

详解JavaScript 为什么要有 Symbol 类型？

Apr 03 Javascript

用Vue.js方法创建模板并使用多个模板合成

Jun 28 Javascript

微信小程序实现星级评价

Nov 20 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