可自己添加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判断用户是否上网(连接网络)
Dec 23 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
Vue-component全局注册实例
Sep 06 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
深入研究React中setState源码
2017/11/17 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
layUI的验证码功能及校验实例
2019/10/25 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
Django时区详解
2019/07/24 Python
python批量修改ssh密码的实现
2019/08/08 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
python语言中有算法吗
2020/06/16 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
初三家长会邀请函
2014/01/18 职场文书
酒店经理职责
2014/01/30 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
大学生见习报告范文
2014/11/03 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
教师个人事迹材料
2014/12/17 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers