/************************************自动适应的图片弹窗*********************************/
var autoimg=function(argcs){/*调整图片大小，等比例缩放argcs['maxheight']=>最大高度,argcs['maxwidth']=>最大宽度,argcs['height']=>图片高度，argcs['width']=>图片宽度*/
var _maxheight='';
var _maxwidth='';
var _newsize=[];
if(argcs['maxheight']){
_maxheight=argcs['maxheight'];
}
if(argcs['maxwidth']){
_maxwidth=argcs['maxwidth'];
}
if(!argcs['height']){
throw new error('height未指定');
}
if(!argcs['width']){
throw new error('width未指定');
}
if(argcs['height']>argcs['width']||argcs['height']==argcs['width']){//高度不小于宽度的情况
if(argcs['height']>=_maxheight){
_newsize['height']=_maxheight;
_newsize['width']=(_maxheight/argcs['height'])*argcs['width'];
}else{
_newsize['width']=argcs['width'];
_newsize['height']=argcs['height'];
}
return _newsize;
}
if(argcs['width']>argcs['height']){//宽度大于高度的情况
if(argcs['width']>=_maxwidth){
_newsize['width']=_maxwidth;
_newsize['height']=(_maxwidth/argcs['width'])*argcs['height'];
}else{
_newsize['width']=argcs['width'];
_newsize['height']=argcs['height'];
}
return _newsize;
}
}
var imgbox=function(imgsrc){
var winimg=new popbox({//图片弹窗
id:'imgbox',
bgcolor:'#a3c90e',
width:906,
movehandle:false,
closebutton:false,
height:'auto',
times:250,
lock:true,
content:'',
shadow:true,
position:'center',
displaycallback:function(){
$('body').append('');
$('img[id=loading]').css('z-index',110000).css({position:'absolute',left:$(window).scrollleft()+($(window).width())/2-($('img[id=loading]').width())/2-22,top:$(window).scrolltop()+($(window).height()/2-($('img[id=loading]').width())/2)});
/************图片预加载，重新调整窗口大小及位置**************/
var img=new image();
var _imgwidth=0;
var _imgheight=0;
img.src=imgsrc;//为img对象添加地址
// console.log(imgsrc);
/*************************图片加载完成之后***************************/
img.onload=function(){
$('img[id=loading]').remove();
_imgwidth=img.width;
_imgheight=img.height;
var argcs=[];
var winwidth=$(window).width();
argcs['maxheight']=750;//最大高度
argcs['maxwidth']=900;//最大宽度
argcs['height']=_imgheight;
argcs['width']=_imgwidth;
var newwh=autoimg(argcs);//获得缩略后的图片宽和高
/************图片预加载，重新调整窗口大小及位置************/
$('#'+winimg.id).css({width:newwh['width'],height:newwh['height'],top:parseint($(document).scrolltop())+parseint(($(window).height()-newwh['height'])/2),left:$(document).scrollleft()+parseint(winwidth/2)-parseint(newwh['width']/2)});
$('#'+winimg.id).html('');
/************图片预加载，重新调整窗口大小及位置**************/
$('#'+winimg.id+'_bg').css('cursor','pointer').click(function(){
winimg.kill();
});
};
/*************************图片加载完成之后***************************/
},
undisplaycallback:function(){
},
killcallback:function(){
}
});
winimg.dispaly();
}
popbox代码
复制代码 代码如下:
//若使用移动功能，请先导入jquery移动ui组件
var popbox=function(settings){//弹窗函数settings=[]
//alert(typeof settings['width']);
//alert(settings['displaycallback']);
/************************本类私有变量*****************************/
/*******************默认值*****************/
var _shadow=true;//是否有遮罩true/false
var _closebutton=false;//关闭按钮false/dom元素
var _killbutton=false;//kill按钮false/dom元素
var _movehandle=false;//拖动手柄false/dom元素
var _width=650;//宽,
var _bgcolor='#fff';//背景样式
var _height='auto';//高
var _content='没有内容';//内容
var _position='center';/*位置topleft,topcenter,topright,center,bottomleft,bottomright,bottomcenter*/
var _lock=true;//是否锁定
var _times=500;//显示，隐藏的时间
var _displaycallback=function(){//dispaly回调函数
alert('display');
}
var _undisplaycallback=function(){//undispaly回调函数
alert('undisplay');
}
var _beforekillcallback=function(){
alert('beforekill');
}//kill之前的回调函数
var _killcallback=function(){//kill回调函数
alert('kill');
}
/*******************默认值*****************/
if(settings['closebutton']!==undefined){
//alert('shadow');
_closebutton=settings['closebutton'];
}
if(settings['killbutton']!==undefined){
//alert('shadow');
_killbutton=settings['killbutton'];
}
if(settings['movehandle']!==undefined){
//alert('shadow');
_movehandle=settings['movehandle'];
}
/******************获得设置值********************/
/**settings['shadow']!=' ' && settings['shadow']!=undefined*/
if(settings['shadow']!==undefined){
//alert('shadow');
_shadow=settings['shadow'];
}
if(settings['bgcolor']!==undefined){
//alert('shadow');
_bgcolor=settings['bgcolor'];
}
if( settings['width']!==undefined){
_width=settings['width'];
}
if( settings['height']!==undefined){
_height=settings['height'];
}
if(settings['content']!==undefined){
_content=settings['content'];
}
if(settings['position']!==undefined){
_position=settings['position'];
}
if( settings['times']!==undefined){
_times=settings['times'];
}
if(settings['lock']!==undefined){
_lock=settings['lock'];
}
if(settings['displaycallback']!=undefined){
//alert('here');
_displaycallback=settings['displaycallback'];
}
if( settings['undisplaycallback']!==undefined){
_undisplaycallback=settings['undisplaycallback'];
}
if( settings['beforekillcallback']!==undefined){
_beforekillcallback=settings['beforekillcallback'];
}
if( settings['killcallback']!==undefined){
_killcallback=settings['killcallback'];
}
//alert(settings['shadow']);
//alert(_shadow);
/************************本类私有变量******************************/
/*********************本类内部变量********************/
var _this=this;
var _basezindex=10000;
var _domwidth=$(document).width();
var _domheight=$(document).height();
/********************本类内部变量*******************/
/********************本类私有函数**********************/
var _getzindex=function(){/*获得z-index->首先遍历网页div元素id中含有popbox的dom,获得数量，然后本弹窗背景z-index=基数+当前数量+1,弹框z-index=基数+当前数量+2*/
var _len=$('body').children('div').length;
var _countdiv=0;
var _divobj=$('body').children('div');
var _reg=/^popbox_/;//正则表达式
for(var i=0;i if(_reg.test(_divobj.eq(i).attr('id'))){
_countdiv+=1;
}
}
return _countdiv;//返回已有弹框的数量
}
var _getwinzindex=function(){//获得弹窗的z-index
var _winzindex=_basezindex+_getzindex()+2;
return _winzindex;
}
var _gewinbgzindex=function(){//获得弹窗背景的z-index
var _winbgzindex=_basezindex+_getzindex()+1;
return _winbgzindex;
}
var _renderbg=function(){//渲染背景 www.jb51.net
var _winbgzindex=_gewinbgzindex();
//alert($(document).height());
$('body').append('
');//在body中插入一个半透明的背景
$('#'+_this.id+'_bg').addclass('popbox_bg').css({height:_domheight,width:_domwidth,opcity:0}).css('z-index',_winbgzindex).fadeto(_times,0.7);
}
var _creatwin=function(){//创建窗体
$('body').append('
');
_rendercontent(_content);//渲染弹窗主体
_initwin();//初始化窗体
}
var _initwin=function(){//初始化窗体
var _winzindex=_getwinzindex();
var _transheight=0;
if(_height=='auto'){
_transheight='auto';
}else{
_transheight=parseint(_height)+'px';
}
$('#'+_this.id).css({width:parseint(_width)+'px',height:_transheight,position:'absolute',opticity:1.0,background:_bgcolor}).css('z-index',_winzindex);
if(_lock==false){
if(_movehandle!==undefined&&_movehandle!==false&&_movehandle!==' '){
$('#'+_this.id).children(_movehandle).css('cursor','move');
//alert(_movehandle);
//alert($('#'+_this.id).children(_movehandle).html());
}
}
_locationwin();//为窗体定位
}
var _locationwin=function(){/*为窗体定位topleft,topcenter,topright,centerleft,center,centerright,bottomleft,bottomcenter,bottomright*/
var _windowheight=parseint($(window).height());
var _windowwidth=parseint($(window).width());
//alert(_windowwidth+_height);
var _left=(_windowwidth-parseint(_width))/2;
var _top=parseint($(document).scrolltop())+parseint(($(window).height()-$('#'+_this.id).height())/2);
$('#'+_this.id).css({top:_top+'px',left:_left+'px'});
}
var _rendercontent=function(content){//渲染弹窗主体
$('#'+_this.id).append(content);
}
var bindevent=function(){//绑定事件
if(_this.status!=='kill'&&_this.status!=='init'){
if(_closebutton!==undefined&&_closebutton!==' '&&_closebutton!==false){
$('#'+_this.id+' '+_closebutton).css('cursor','pointer').live('click',function(e){
_this.undisplay();
});
}//若设置了关闭(close)按钮
if(_killbutton!==undefined&&_killbutton!==' '&&_killbutton!==false){
$('#'+_this.id+' '+_killbutton).css('cursor','pointer').live('click',function(e){
_this.kill();
});
}//若设置了杀死(kill)按钮
}
if(_lock==false){
$('#'+_this.id).draggable({cancel:''});
}
}
/*********************本类私有函数*****************/
/**********************本类公有函数******************/
this.status='init';//当前状态init->初始化状态,display->display状态,undisplay->undisplay状态,kill->kill状态
this.id='';
var _id=settings['id'];
if(_id==' '||(typeof _id)==undefined){
throw new error('id不能为空');
}else{
this.id='popbox_'+_id;
}
this.display=function(){//显示函数,如果状态是init或者kill重新渲染页面
//alert(_this.status);
if(_this.status=='init'||_this.status=='kill'){
_creatwin();//创建窗体
//$('#'+_this.id).css('height',_domheight);
if(_shadow==true){//渲染遮罩
/*alert(_shadow);*/
_renderbg();
}
_this.status='display';
_displaycallback();
}else{
$('#'+_this.id).fadein(_times);
if(_shadow==true){
$('#'+_this.id+'_bg').fadein(_times);
}
_this.status='display';
}
//alert(typeof _displaycallback);
//alert(_this.status);
bindevent();
}
this.kill=function(){//彻底移除
//alert(_this.status);
//alert(_this.status);
if(_this.status=='kill'||_this.status=='init'){
//alert(_this.status);
throw new error('非法操作，当前状态不允许kill');
}
if(_beforekillcallback!=undefined){
_beforekillcallback();
}
$('#'+_this.id).remove();
if(_shadow==true){
$('#'+_this.id+'_bg').remove();
}
_this.status='kill';
if(_killcallback!=undefined){
_killcallback();
}
}
this.undisplay=function(){//隐藏函数
if(_this.status=='init'||_this.status=='kill'){
throw new error('非法操作，当前状态不允许undisplay');
}
if(_undisplaycallback!=undefined){
_undisplaycallback();
}
$('#'+_this.id).fadeout(_times);
$('#'+_this.id+'_bg').fadeout(_times);
_this.status='undisplay';
}
/**********************本类公有函数******************/
}//popbox网页弹窗
var errorbox=function(errormsg){
//alert(typeof errorbox);
//alert(errorbox.length);
var errorobj=new popbox({
id:'errorobj',
bgcolor:'#fff',
width:300,
movehandle:false,
closebutton:false,
height:'auto',
times:200,
lock:true,
content:$('#errorboxcontent').html(),
shadow:true,
position:'center',
displaycallback:function(){
$('#'+errorobj.id).find('.errormessage').html();
$('#'+errorobj.id).find('.errormessage').html(errormsg);
$('#'+errorobj.id).find('.errorconfirm input').click(function(){
//alert('here');
errorobj.kill();
});
},
undisplaycallback:function(){
throw new error('错误不可以关闭，只可以kill');//错误方法只能kill，不能关闭
},
killcallback:function(){
//errorbox=null;
}
});
errorobj.dispaly();
}//错误弹窗