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 相关文章推荐
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
vue实现图片上传功能
May 28 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语句将数据库*.sql文件导入数据库
2014/05/05 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
js精确的加减乘除实例
2017/11/14 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
python编写爬虫小程序
2015/05/14 Python
Python单例模式的两种实现方法
2017/08/14 Python
浅谈Python中的bs4基础
2018/10/21 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
python 内置模块详解
2019/01/01 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
建筑项目策划书
2014/01/13 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
综治目标管理责任书
2015/05/11 职场文书
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang