当前位置：首页 → 问答吧 → 【原创-超实用方便的jQuery弹出层插件】

【原创-超实用方便的jQuery弹出层插件】

时间：2010-08-15

来源：互联网

我们在前端开发，经常要用到弹出层的效果，以前很早前就想将这个功能整理成一个公共的接口来实现了；自写的第一个jQuery插件“类似QQ空间相片查看jQuery插件http://bbs.phpchina.com/thread-191427-1-1.html”被版主收录后，给了我信心，所以利用今天休息天再来写我的这个第二个jQuery插件，一来是自己以后随时可以使用，二来是当做代码的收集与整理；该插件在开发中参考了网友的一些资料，如兼容XHTML和HTML和算法等，还引用了我同事所整理的代码，在些发表感谢！
该插件特性功能：
1:弹出显示时带遮罩效果,并可定义遮罩的颜色
2:可自定义是否带动画显示效果.
3:支持托动效果.
4:支持绑定方式关闭层或显示调用方式关闭层
5:兼容 HTML文档和 XHTML文档
6:对窗口大小或滚动条自适应。

/*
项目：jQuery弹出层插件
版本：Ver 1.0
作者：袁维
感谢：飞舟提供的"层托动效果"代码
详细效果:http://www.myquickphp.com/archives/163
*/
//解决 $ 被其它框架所定义带来的影响
(function($){
$.fn.extend({
//插件的设置数据
popSet:{
closeId:'',//可以执行关闭当前层的DOM ID,这个值是可选项
titleId:'', //层移动的DOM ID，这个值是可选项，
backDivColor:'#333',//遮罩层的颜色
showAnimate:true, //弹出层显示时是否有动画效果
backDivId:'pop__div__id'//遮罩层的ID,一般不在程序中设置
},
//显示弹出层
popShow:function(setObj){
/*
层的托动效果
titleDivid:弹出层中的标题栏ID
dragDivid:整个用于托动的层
*/
var divDragGable = function(titleDivid , dragDivid)
{
document.getElementById(titleDivid).style.cursor = "move";
document.getElementById(titleDivid).onmousedown=function(e){
var posX;
var posY;
var fdiv = document.getElementById(dragDivid);
if(!e) e = window.event;
posX = e.clientX - parseInt(fdiv.style.left);
posY = e.clientY - parseInt(fdiv.style.top);
document.onmousemove = function(ev){
if(ev==null) ev = window.event;
fdiv.style.left = (ev.clientX - posX) + "px";
fdiv.style.top = (ev.clientY - posY) + "px";
return false;
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
}
/*
调整遮罩层和弹出层的位置
jqBackDiv:遮罩层的jQuery对象
jqPopDiv:弹出层的jQuery对象
*/
var setDivPox = function(jqBackDiv,jqPopDiv,isScrollEvent)
{
//自动判断当前是否支持W3C标准的
var bodyObj = document.documentElement;
//文档没有DOCTYPE声明，是 HTML文档,否则是XHTML文档
if(document.compatMode == 'BackCompat'){
bodyObj = document.body;
}
//--设置遮罩层为满屏
jqBackDiv.width(Math.max(bodyObj.scrollWidth, document.documentElement.clientWidth));
jqBackDiv.height(Math.max(bodyObj.scrollHeight, document.documentElement.clientHeight));
//调整要显示的DIV的位置
var dleft = bodyObj.clientWidth/2 - jqPopDiv.width()/2;
var dtop = bodyObj.clientHeight/2 - jqPopDiv.height()/2;
//如果是Scroll事件
if(typeof(isScrollEvent)!= 'undefined' && isScrollEvent){
dleft += bodyObj.scrollLeft;
dtop += bodyObj.scrollTop;
}
jqPopDiv.css({left:dleft,top:dtop,position:'absolute',zIndex:1001});
}
//读取用户的设置,注意：这个 this == jQuery 对象
if(typeof(setObj.closeId) != 'undefined'){
this.popSet.closeId = setObj.closeId;
}
if(typeof(setObj.titleId) != 'undefined'){
this.popSet.titleId = setObj.titleId;
}
if(typeof(setObj.backDivColor) != 'undefined'){
this.popSet.backDivColor = setObj.backDivColor;
}
if(typeof(setObj.showAnimate) != 'undefined'){
this.popSet.showAnimate = setObj.showAnimate;
}
//弹出一个遮罩层
var backDivId = this.popSet.backDivId;
//--如果弹出层不存在则添加
if($('#'+backDivId).length < 1){
//--遮罩层追加到 body //#333
var divStr = '<div id="'+backDivId+'" style="background-color:'+this.popSet.backDivColor+';filter: Alpha(Opacity=40); -moz-opacity:.1; opacity:0.5; position:absolute; left:0px;top:0px; z-index:1000"></div>';
$(divStr).appendTo('body');
}
//设置位置
setDivPox($('#'+backDivId),this);
//动画效果显示出来
$('#'+backDivId).show();
this.popSet.showAnimate ? this.fadeIn("slow") : this.show();
//将当前jQuery对象保存,在绑定事件中会用到
var jq = this;
//绑定关闭事件的DOM
var ary = this.popSet.closeId.split(',');
for(var i=0; i<ary.length; ++i){
$('#'+ary[i]).click(function(){
jq.popHide();
});
//鼠标显示手型
$('#'+ary[i]).css({cursor:'pointer'});
}
//绑定弹出层的移动效果
if(this.popSet.titleId != ''){
divDragGable(this.popSet.titleId , this.attr('id'));
}
//绑定窗口缩放和滚动事件
$(window).resize(function(){
setDivPox($('#'+backDivId),jq);
});
$(window).scroll(function(){
setDivPox($('#'+backDivId),jq,true);
});
},
//关闭弹出层
popHide:function(){
//隐藏层
this.hide();
$('#'+this.popSet.backDivId).hide();
//取消绑定的事件
$(window).unbind('resize');
$(window).unbind('scroll');
}
});
})(jQuery);

复制代码