可自己添加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 相关文章推荐
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
js获取Get值的方法
Sep 29 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 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 一个页面执行时间类代码
2010/03/05 PHP
PHP判断远程图片是否存在的几种方法
2014/05/04 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
composer.lock文件的作用
2016/02/03 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
javascript 回调函数详解
2014/11/11 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
python求素数示例分享
2014/02/16 Python
Python 专题四 文件基础知识
2017/03/20 Python
Python中turtle作图示例
2017/11/15 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
python如何处理程序无法打开
2020/06/16 Python
Python 实现集合Set的示例
2020/12/21 Python
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
教师自荐书
2013/10/08 职场文书
小加工厂管理制度
2014/01/21 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
员工自我工作评价
2015/03/06 职场文书
法人代表证明书范本
2015/06/18 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis