使用jquery制作弹出框效果
非常不错的国产JS弹出框插件，由前端工程师alien开发，提供多种类型的自定义对话框，使用方法简单，浏览器兼容性好，支持的弹出框模式有：
alert：普通提示（警告）对话框
confirm：询问（确认）对话框
message：简单消息对话框（无title、无按钮）
iframe：在对话框中嵌入一个iframe
tip：带有小三角指向的小tip
dialog：最基础的自定义对话框
varjDialogId=[];
(function($){
$.jDialog=function(options){
varid=parseInt(Math.floor(Math.random()*1000+1));
while($.inArray(id,jDialogId)!=-1){
id=parseInt(Math.floor(Math.random()*1000+1));
}
jDialogId.push(id);
vardefaults={
title:"",
content:"这是一个JasUI-Dialog插件",
width:350,
height:0,
timer:0,
showbuttons:false,
buttons:[],
okval:"确认",
ok:function(){returnfalse;},
cancelval:"取消",
cancel:function(){returnfalse;},
showclose:true,
close:function(){},
theme:""
};
varoptions=$.extend(defaults,options);
var_objdiv="<divid='j-dialog-"+id+"'class='j-dialog";
if(options.theme!=""){
_objdiv=_objdiv+"j-dialog-"+options.theme+"'>";
}else{
_objdiv=_objdiv+"'>";
}
_objdiv=_objdiv+"<divclass='j-dialog-header'>";
if(options.showclose){
_objdiv=_objdiv+"<ahref='javascript:void(0)'class='j-closej-dialog-close'></a>"
}
if(options.title!=""){
_objdiv=_objdiv+"<h5class='j-dialog-title'>"+options.title+"</h5>";
}
_objdiv=_objdiv+"</div>";
_objdiv=_objdiv+"<pclass='j-dialog-content'>"+options.content+"</p>";
if(options.showbuttons){
_objdiv=_objdiv+"<divclass='j-dialog-footer'>";
$.each(options.buttons,function(i,value){
_objdiv=_objdiv+"<aclass='j-button'data-id='"+i+"'>"+value.title+"</a>";
})
_objdiv=_objdiv+"<aclass='j-buttonj-button-primaryj-dialog-ok'>"+options.okval+"</a>";
_objdiv=_objdiv+"<aclass='j-buttonj-dialog-cancel'>"+options.cancelval+"</a>";
_objdiv=_objdiv+"</div>";
};
_objdiv=_objdiv+"</div>";
$("body").append(_objdiv);
var_obj=$('#j-dialog-'+id)
if(options.height>0){
_obj.css("height",options.height);
}
_obj.css("width",options.width);
_obj.css("margin-top",'-'+(options.height/2)+'px');
_obj.css("margin-left",'-'+(options.width/2)+'px');
_obj.animate({top:'30%',opacity:1},0);
if(options.showclose){
_obj.find('.j-dialog-close').on('click',function(){
$.jDialogRemove(id,options.close);
})
_obj.find('.j-dialog-ok').on('click',function(){
if(!options.ok()){
$.jDialogRemove(id,options.close);
}
})
_obj.find('.j-dialog-cancel').on('click',function(){
if(!options.cancel()){
$.jDialogRemove(id,options.close);
}
})
}
if(options.showbuttons){
$.each(options.buttons,function(i,value){
_obj.find("[data-id="+i+"]").on('click',function(){
if(!value.callback()){
$.jDialogRemove(id,options.close);
}
})
})
};
if(options.timer>0){
setTimeout(function(){
$.jDialogRemove(id,options.close);
},options.timer);
}
returnid;
},
$.jDialogRemove=function(id,callback){
if($.inArray(id,jDialogId)!=-1){
jDialogId.splice($.inArray(id,jDialogId),1);
$('#j-dialog-'+id).animate({top:'0',opacity:0},500,function(){
$('#j-dialog-'+id).remove();
if(callback){
callback();
}
});
}
},
$.jTip=function(options){
vardefaults={
content:"这是一个JasUI-Dialog插件",
width:200,
timer:0,
showclose:false,
close:function(){},
theme:""
};
varoptions=$.extend(defaults,options);
$.jDialog(options);
},
$.jFloatText=function(txt,color,posX,posY){
var$i=$("<b>").text(txt);
varx='50%',y='40%';
var_color='#E94F06';
if(color){
_color=color;
}
if(posX){
x=posX;
}
if(posY){
y=posY;
}
$i.css({top:200,left:x,position:"absolute",color:"#E94F06"});
$("body").append($i);
$i.animate({top:20,opacity:0},1500,function(){
$i.remove();
});
}
})(jQuery);
以上所述就是本文的全部内容了，希望能够对大家熟练使用jQuery有所帮助。