可自己添加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 相关文章推荐
JavaScript While 循环基础教程
Apr 05 Javascript
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
JavaScript错误处理操作实例详解
Jan 04 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
php自动适应范围的分页代码
2008/08/05 PHP
php SQL Injection with MySQL
2011/02/27 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
财务管理专业推荐信
2013/11/19 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
加入学生会自荐书
2015/03/05 职场文书
开除员工通知
2015/04/22 职场文书
干部考核工作总结
2015/08/12 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript