可自己添加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 相关文章推荐
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
Vuex提升学习篇
Jan 11 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
如何制作自己的原生JavaScript路由
May 05 Javascript
用React Native制作一个简单的游戏引擎
May 27 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
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
PHP安全下载文件的方法
2016/04/07 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
vue路由权限校验功能的实现代码
2020/06/07 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
python encode和decode的妙用
2009/09/02 Python
深入理解Python中各种方法的运作原理
2015/06/15 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
利用python进行文件操作
2020/12/04 Python
Django中使用Celery的方法步骤
2020/12/07 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
中科软笔试题和面试题
2014/10/07 面试题
演讲稿格式
2014/04/30 职场文书
环保建议书100字
2014/05/14 职场文书
网络技术专业求职信
2014/07/13 职场文书
四风问题对照检查材料
2014/09/22 职场文书
教师教育教学随笔
2015/08/15 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL