可自己添加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 相关文章推荐
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
js实现左右轮播图
Jan 09 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 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入门速成教程
2007/03/19 PHP
在PHP中使用模板的方法
2008/05/24 PHP
PHP关联链接常用代码
2012/11/05 PHP
浅析is_writable的php实现
2013/06/18 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
PHP实现懒加载的方法
2015/03/07 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
Python中存取文件的4种不同操作
2018/07/02 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
python如何修改文件时间属性
2021/02/05 Python
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
static函数与普通函数有什么区别
2015/12/25 面试题
残疾人创业典型事迹
2014/02/01 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
英镑符号 £
2022/02/17 杂记
详解在OpenCV中如何使用图像像素
2022/03/03 Python