/**************************************Automatically adapted picture pop-ups********** ***********************/
var autoImg=function(argcs){/*Adjust the size of the image and scale it proportionally argcs['maxHeight']=>maximum height,argcs['maxWidth ']=>Maximum width, argcs['height']=>Picture height, argcs['width']=>Picture width*/
var _maxHeight=''; ;
var _newSize=[]; > maxWidth']){
_maxWidth=argcs['maxWidth']; throw new Error('height is not specified'); 'width'] || Argcs ['Height'] == ARGCS ['Width']) {// The case where height is not less than width
if (Argcs ['Height'] & gt; = _ Maxheight) {
_newSize['height']=_maxHeight;
']=argcs['width'];
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)});
/************Picture preloading, re-adjust window size and position*******************/
var img=new Image();
var _imgWidth=0;
var _imgHeight=0;
img.src=imgSrc;//为img对象添加地址
// console.log(imgSrc);
/***************************After the picture is loaded********************** ****/
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);//获得缩略后的图片宽和高
/************Picture preloading, re-adjust window size and position*************/
$('#' 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('
');
/************Picture preloading, re-adjust window size and position*******************/
$('#' winImg.ID '_bg').css('cursor','pointer').click(function(){
winImg.kill();
});
};
/***************************After the picture is loaded********************** ****/
},
unDisplayCallBack:function(){
},
killCallBack:function(){
}
});
winImg.dispaly();
}
//If you use the mobile function, please import the jQuery mobile UI component first
var popBox=function(settings){//Pop-up function settings=[]
//alert(typeof settings[ 'width']);
;//Whether there is a mask true/false
var _closeButton=false;//Close button false/dom element
var _killButton=false;//kill button false/dom element
var _moveHandle=false; //Drag handle false/dom element
var _width=650;//Width,
var _bgColor='#FFF';//Background style
var _height='auto';//Height
var _content='No content';//Content
var _position='center';/*Position topLeft,topCenter,topRight,center,bottomLeft,bottomRight,bottomCenter*/
var _lock=true;/ /Whether to lock
var _times = 500; // Show, the hidden time
var _displayCallback = Function () {//dispaly back function
Alert ('Display');
}
var _unDisplayCallBack=function(){//unDispaly callback function ('beforeKill');
//Callback function before kill
var _killCallBack=function(){//kill callback function
alert('kill');
} }
/**************************Private variables of this class************************ *****/
if(settings['closeButton']!==undefined){
//alert('shadow'); killButton']!==undefined){
//alert('shadow'); =undefined){
//alert('shadow');
/*******************default value*****************/
If(settings['shadow']!==undefined){
//alert('shadow');
_shadow=settings['shadow'];
}
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<_len;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(''); 양식 초기화
var _winZindex=_getWinZindex(); _transHeight='auto'; bgColor}).css('z-index',_winZindex);
if(_lock==false){
{
$('#' _this.ID).children(_moveHandle).css('cursor','move'); //경고($( ' #' _this.ID).children(_moveHandle).html());
| ight,centerLeft,center,centerRight,bottomLeft,bottomCenter,bottomRight*/
var _windowHeight =parseInt($(window).height());
var _windowWidth =parseInt($(window).width());
seInt($ (문서).scrollTop()) parseInt(($( window).height()-$('#' _this.ID).height())/2);
$('#' _this.ID) .css({top:_top 'px',left: _왼쪽 'px'});
.ID).append(content)
var bindevent = function () {// 绑定事件
if (_this.status! == 'kill'&& _ this.status! == 'init') {
if (_closebutton! == intfefined && _ closeButton !==' '&&_closeButton!==false){
$('#' _this.ID ' ' _closeButton).css('cursor','pointer').live('click',function(e){
_this.unDisplay()
});
}//若设置了关闭(close)按钮
if(_killButton!==undefound&&_killButton!=='&&_killButton!==false) {
$('#' _this.ID ' ' _killButton ).css('cursor','pointer').live('click',function(e){
_this.kill();
});
}//若设置了杀死(kill)按钮
}
if(_lock==false){ > $('#' _this.ID).draggable({취소:'' });
}
}
/***********************이 클래스의 개인 기능*****************/
/**************************이 클래스의 공개 기능*******************/
this.status='init';//当前状态init->初始化状态,display->display状态,undisplay->undisplay状态,kill->kill状态
this.ID='';
var _ID=settings['ID'];
if(_ID==' '||(typeof _ID)==undefine){
throw new Error('ID不能为空');
}else{
this.ID='popBox_' _ID;
}
this.display=function(){//표시 함수, 상태가 init 또는 kill인 경우 페이지를 다시 렌더링합니다.
//alert(_this.status)
if(_this.status= ='init' ||_this.status=='kill'){
> ~ ~ > ~ > //alert(_this.status);
binEvent();
}
this.kill=function(){//완전히 제거
//alert(_this.status); //경고(_this .status);
> ~
this.unDisplay=function(){//숨겨진 함수
if(_this.status=='init'||_this.status=='kill'){
throw new Error('잘못된 연산 , 현재 상태에서는 표시 취소가 허용되지 않습니다.') 🎜> $('#' _this.ID).fadeOut( _times)
$('#' _this.ID '_bg').fadeOut(_times) );
_this.status='표시 해제'; 🎝>*/
길이); ,
closeButton :false,
높이:'자동',
회:200,
잠금:true,
내용:$('#errorBoxContent').html(),
그림자:true,
위치:' 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(); DisplayCallBack:function(){
> 끄기
},
KillCallback: function () {
// errorbox = null;
}
})
errorObj.dispaly(); 오류 팝업창
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
