可自己添加html的伪弹出框实现代码

 更新时间:2013年09月08日 16:18:46   作者:  
本文为大家介绍下html伪弹出框的实现,感兴趣的朋友可以了解下
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>

相关文章

  • 基于jquery实现动态竖向柱状条特效

    基于jquery实现动态竖向柱状条特效

    很多数据统计效果中,柱状条方式的算是比较常见的一种,形象直观,下面就是一段能够实现此功能的代码实例,并且具有一定的动态效果,感兴趣的朋友可以参考一下
    2016-02-02
  • jquery中$.fn和图片滚动效果实现的必备知识总结

    jquery中$.fn和图片滚动效果实现的必备知识总结

    图片滚动效果相信大家都使用过,看上去很简单的一个效果,如果想熟练的掌握必须知道jquery、IIFE、setInterval等基础以及$.fn用法,下面这篇文章主要介绍了关于jquery中$.fn和图片滚动效果制作的必备知识,需要的朋友可以参考下。
    2017-04-04
  • jquery中获得$.ajax()事件返回的值并添加事件的方法

    jquery中获得$.ajax()事件返回的值并添加事件的方法

    如果想获得$.ajax()中返回的值,直接用在success:funciton(){return xx} 是不可以的,要想获得xx的值,要在script中,使用全局变量。利用全局变量引出xx的值。
    2010-04-04
  • jQuery实现判断滚动条到底部

    jQuery实现判断滚动条到底部

    这篇文章主要介绍了jQuery实现判断滚动条到底部的相关资料,需要的朋友可以参考下
    2015-06-06
  • jQuery插件DataTables分页开发心得体会

    jQuery插件DataTables分页开发心得体会

    这篇文章主要为大家分享了jQuery插件DataTables分页开发心得体会,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • jquery+css实现的红色线条横向二级菜单效果

    jquery+css实现的红色线条横向二级菜单效果

    这篇文章主要介绍了jquery+css实现的红色线条横向二级菜单效果,界面美观大方,简洁实用,通过jquery遍历及切换页面元素实现这一功能,需要的朋友可以参考下
    2015-08-08
  • jquery复选框全选/取消示例

    jquery复选框全选/取消示例

    jquery复选框全选/取消示例,实现点击复选框的时候全选所有的子复选框,再点击取消所有复选框的选中状态
    2013-12-12
  • jquery 笔记 事件

    jquery 笔记 事件

    写js已经有很久了,但是对js的详细了解还是很肤浅的,这几天在看jquery,在其中有一些新的发现和体会,记录下来
    2011-11-11
  • jQuery的图片轮播插件PgwSlideshow使用详解

    jQuery的图片轮播插件PgwSlideshow使用详解

    这篇文章主要介绍了jQuery的图片轮播插件PgwSlideshow使用详解的相关资料,需要的朋友可以参考下
    2016-08-08
  • jQuery验证表单格式的使用方法

    jQuery验证表单格式的使用方法

    本文给大家讲解关于此jQuery验证的一些标记以及使用方法,非常不错,具有参考借鉴借鉴价值,需要的朋友参考下
    2017-01-01

最新评论