可自己添加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异步请求数据实例代码
Dec 28 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
12 种使用Vue 的最佳做法
Mar 30 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优化需要注意的地方
2014/11/27 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
JS实现多功能计算器
2020/10/28 Javascript
django 使用全局搜索功能的实例详解
2019/07/18 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
联想英国官网:Lenovo英国
2019/07/17 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
后勤工作职责
2013/12/22 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
详解redis在微服务领域的贡献
2021/10/16 Redis
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js