可自己添加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+json实现的搜索加分页效果
Mar 31 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
Textarea与懒惰渲染实现代码
Jan 04 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 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
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
python处理json数据中的中文
2014/03/06 Python
python实现文件名批量替换和内容替换
2014/03/20 Python
Python装饰器的函数式编程详解
2015/02/27 Python
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
C有"按引用传递"吗
2016/09/06 面试题
几个数据库方面的面试题
2016/07/01 面试题
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
建筑设计专业求职自我评价
2014/03/02 职场文书
满月酒邀请函
2015/01/30 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS
python标准库ElementTree处理xml
2022/05/20 Python