可自己添加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 相关文章推荐
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
easyui-datagrid开发实践(总结)
Aug 02 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 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
jquery下json数组的操作实现代码
2010/08/09 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
python实现同时给多个变量赋值的方法
2015/04/30 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
python dict 相同key 合并value的实例
2019/01/21 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
python解析xml简单示例
2019/06/21 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
python字典排序的方法
2019/10/12 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
人力资源职位说明书
2014/07/29 职场文书
群众路线个人整改方案
2014/10/25 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python