可自己添加html的伪弹出框实现代码


Posted in Javascript onSeptember 08, 2013

js

var popupStatus = 0; 
//loading popup with jQuery magic! 
function loadPopup(){ 
//loads popup only if it is disabled 
if(popupStatus==0){ 
$("#backgroundPopup").css({ 
"opacity": "0.7" 
}); 
$("#backgroundPopup").fadeIn("slow"); 
$("#popupContact").fadeIn("slow"); 
popupStatus = 1; 
} 
} 
//disabling popup with jQuery magic! 
function disablePopup(){ 
//disables popup only if it is enabled 
if(popupStatus==1){ 
$("#backgroundPopup").fadeOut("slow"); 
$("#popupContact").fadeOut("slow"); 
popupStatus = 0; 
} 
} 
//centering popup 
function centerPopup(){ 
//request data for centering 
var browser=navigator.userAgent; 
var windowWidth = document.documentElement.clientWidth; 
var windowHeight = document.documentElement.clientHeight; 
var stop=""; 
var sleft=""; 
if(browser.indexOf('Chrome')!=-1){ 
stop=document.body.scrollTop; 
sleft=document.body.scrollLeft; 
} 
else{ 
stop=document.documentElement.scrollTop; 
sleft=document.documentElement.scrollLeft; 
} 
// windowWidth+=document.body.scrollLeft; 
// windowHeight+=document.body.scrollTop; 
var popupHeight = $("#popupContact").height(); 
var popupWidth = $("#popupContact").width(); 
//centering 
$("#popupContact").css({ 
"position": "absolute", 
"top": windowHeight/2-popupHeight/2+stop, 
"left": windowWidth/2-popupWidth/2+sleft 
}); 
//only need force for IE6 
//背景色 
$("#backgroundPopup").css({ 
"height": windowHeight 
}); 
} 
//调用弹出框事件 
function bb(str){ 
$("#download").show(); 
centerPopup(); 
loadPopup(); 
//CLOSING POPUP 
//Click the x event! 
$("#popupContactClose").click(function(){ 
disablePopup(); 
}); 
//Click out event!,点击背景事件 
$("#backgroundPopup").click(function(){ 
disablePopup(); 
}); 
//Press Escape event! 
$(document).keypress(function(e){ 
if(e.keyCode==27 && popupStatus==1){ 
disablePopup(); 
} 
}); 
}

html代码(默认隐藏)
<div id="download" style="display: none;"> 
<div id="popupContact"> 
<!--自己的 HTML(body中)--> 
</div> 
<div id="backgroundPopup"></div> 
</div> 
</div>
Javascript 相关文章推荐
Extjs学习笔记之六 面版
Jan 08 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
js获取json元素数量的方法
Jan 27 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
js实现翻牌小游戏
Jul 31 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 #Javascript
Jquery.addClass始终无效原因分析
Sep 08 #Javascript
jquery选择器、属性设置用法经验总结
Sep 08 #Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 #Javascript
将Datatable转化成json发送前台实现思路
Sep 06 #Javascript
json数据的列循环示例
Sep 06 #Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 #Javascript
You might like
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
js获取域名的方法
2015/01/27 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
从vue源码看props的用法
2019/01/09 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
python selenium 弹出框处理的实现
2019/02/26 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
吃空饷专项治理工作实施方案
2014/03/04 职场文书
创先争优一句话承诺
2014/05/29 职场文书
行政求职信
2014/07/04 职场文书
音乐幼师求职信
2014/07/09 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
中学团支部工作总结
2015/08/13 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android