可自己添加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 判断代码全收集
Apr 28 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
Express框架之connect-flash详解
May 31 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 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/01/26 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
jQuery版Tab标签切换
2011/03/16 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Python读取Excel的方法实例分析
2015/07/11 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
什么是python的id函数
2020/06/11 Python
Python logging模块handlers用法详解
2020/08/14 Python
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
某同学的自我鉴定范文
2013/12/26 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
学习经验交流会主持词
2014/04/01 职场文书
老公给老婆的保证书
2014/04/28 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript