可自己添加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 AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
基于jQuery的动态表格插件
Mar 28 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
详解JS函数重载
Dec 04 Javascript
JS根据生日算年龄的方法
May 05 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
微信小程序开发探究
Dec 27 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
JS匿名函数内部this指向问题详析
May 10 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文件
2007/01/04 PHP
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
利用python开发app实战的方法
2019/07/09 Python
Python中print函数简单使用总结
2019/08/05 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
《美丽的彩虹》教学反思
2014/02/25 职场文书
啦啦队口号大全
2014/06/16 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
投诉信回复范文
2015/07/03 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书