可自己添加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 相关文章推荐
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
分享php邮件管理器源码
2016/01/06 PHP
php处理带有中文URL的方法
2016/07/11 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
js可突破windows弹退效果代码
2008/08/09 Javascript
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
Python中的闭包总结
2014/09/18 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
python中map()与zip()操作方法
2016/02/27 Python
分享python数据统计的一些小技巧
2016/07/21 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
Python常见数据类型转换操作示例
2019/05/08 Python
详解Python self 参数
2019/08/30 Python
python计算导数并绘图的实例
2020/02/29 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
师范大学音乐表演专业求职信
2013/10/23 职场文书
财务人员个人求职信范文
2013/12/04 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
优质服务标语口号
2015/12/26 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js