可自己添加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 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
javascript里使用php代码实例
Dec 13 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
PHP实现简单日历类编写
2020/08/28 PHP
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
Python实现的递归神经网络简单示例
2017/08/11 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
python tkinter实现屏保程序
2019/07/30 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
2014年两会学习心得体会
2014/03/10 职场文书
大学专科自荐信
2014/06/17 职场文书
荆州古城导游词
2015/02/06 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang
Python OpenCV实现图像模板匹配详解
2022/04/07 Python