可自己添加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 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
js仿微博动态栏功能
Feb 22 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
vue el-table实现自定义表头
Dec 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
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
JS 显示当前日期与时间的代码
2010/03/24 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
js重写方法的简单实现
2016/07/10 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
python进阶教程之异常处理
2014/08/30 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
python开头的coding设置方法
2019/08/08 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
python默认参数调用方法解析
2020/02/09 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
广告学专业推荐信范文
2013/11/23 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
世界文化遗产导游词
2015/02/13 职场文书