Javascript auto-adapted image pop-up window _ javascript skills

This article introduces the sample code of the image pop-up window that JS automatically adapts. If you need it, refer to it. The Code is as follows:

/*********************************** Automatically adapt image pop-up window *********************************/
Var autoImg = function (argcs) {/* adjust the image size, proportional scaling argcs ['maxheight'] => maximum height, argcs ['maxwidth'] => maximum width, argcs ['height'] => Image height, argcs ['width'] => Image 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 unspecified ');
}
If (! Argcs ['width']) {
Throw new Error ('width unspecified ');
}
If (argcs ['height']> argcs ['width'] | argcs ['height'] = argcs ['width']) {// case where the height is not smaller than the 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 the width is greater than the 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 ({// picture pop-up window
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 ('');
Certificate ('img?id=loading='developer.css('z-index', 111_0000.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 )});
/************ Pre-load the image, and re-adjust the window size and position **************/
Var img = new Image ();
Var _ imgWidth = 0;
Var _ imgHeight = 0;
Img. src = imgSrc; // Add an address for the img object
// Console. log (imgSrc );
/************************** After the image is loaded ********** *****************/
Img. onload = function (){
$ ('Img [id = loading] '). remove ();
_ ImgWidth = img. width;
_ ImgHeight = img. height;
Var argcs = [];
Var winWidth = $ (window). width ();
Argcs ['maxheight'] = 750; // maximum height
Argcs ['maxwidth'] = 900; // maximum width
Argcs ['height'] = _ imgHeight;
Argcs ['width'] = _ imgWidth;
Var newWH = autoImg (argcs); // obtain the scaled image width and height.
/************ Pre-load the image, and re-adjust the window size and position ************/
Detail ('{'{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 ('');
/************ Pre-load the image, and re-adjust the window size and position **************/

Certificate ('{'{winimg.id}'_bg'}.css ('cursor ', 'pointer'). click (function (){
WinImg. kill ();
});
};
/************************** After the image is loaded ********** *****************/
},
UnDisplayCallBack: function (){

},
KillCallBack: function (){
}
});
WinImg. dispaly ();
}

PopBox code

The Code is as follows:

// If the mobile function is used, import the jQuery Mobile UI component first.
Var popBox = function (settings) {// Window function settings = []
// Alert (typeof settings ['width']);
// Alert (settings ['displaycallback']);
/************************ Private variables of this class *********** ******************/
/****************** Default value *****************/
Var _ shadow = true; // whether a mask exists. true/false
Var _ closeButton = false; // close the button false/dom Element
Var _ killButton = false; // kill Button false/dom Element
Var _ moveHandle = false; // drag the handle to 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, botshortenter */
Var _ lock = true; // whether to lock
Var _ times = 500; // display, hidden time
Var _ displayCallBack = function () {// dispaly callback function
Alert ('display ');
}
Var _ unDisplayCallBack = function () {// unDispaly callback function
Alert ('undisplay ');
}
Var _ beforeKillCallBack = function (){
Alert ('beforekill ');
} // Callback function before kill
Var _ killCallBack = function () {// kill callback function
Alert ('kill ');
}
/****************** Default value *****************/
If (settings ['closebutton']! = Undefined ){
// Alert ('shadow ');
_ CloseButton = settings ['closebutton '];
}
If (settings ['killclick']! = Undefined ){
// Alert ('shadow ');
_ KillButton = settings ['killclick'];
}
If (settings ['incluhandle']! = Undefined ){
// Alert ('shadow ');
_ MoveHandle = settings ['movehandle'];
}
/****************** Get the set value ****************** **/
/** 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 ('where ');
_ DisplayCallBack = settings ['displaycallback'];
}
If (settings ['undisplaycallback']! = Undefined ){
_ UnDisplayCallBack = settings ['undisplaycallback'];
}
If (settings ['beforekillcallback']! = Undefined ){
_ BeforeKillCallBack = settings ['beforekillcallback'];
}
If (settings ['killcallback']! = Undefined ){
_ KillCallBack = settings ['callback'];
}

// Alert (settings ['shadow ']);
// Alert (_ shadow );
/************************ Private variables of this class *********** *******************/



/******************** Internal variables of this class ************** ******/
Var _ this = this;
Var _ basezindexes = 10000;
Var _ domWidth = $ (document). width ();
Var _ domHeight = $ (document). height ();
/******************* Internal variables of this class *************** ****/


*************** *******/
Var _ getZindex = function () {/* get z-index-> first, traverse the DOM containing popBox in the p element ID of the webpage to obtain the number, then, the background z-index = base + current number + 1 is displayed, and the pop-up box z-index = base + current number + 2 */
Var _ len = $ ('body'). children ('P'). length;
Var _ countDiv = 0;
Var _ pObj = $ ('body'). children ('P ');
Var _ reg =/^ popBox _/; // Regular Expression
For (var I = 0; I <_ len; I ++ ){
If (_ reg. test (_ pObj. eq (I). attr ('id '))){
_ CountDiv + = 1;
}
}
Return _ countDiv; // return the number of existing bullet boxes
}
Var _ getWinZindex = function () {// get the z-index of the pop-up window
Var _ winZindex = _ baseZindex + _ getZindex () + 2;
Return _ winZindex;
}
Var _ geWinBgZindex = function () {// obtain the z-index of the pop-up window background
Var _ winBgZindex = _ baseZindex + _ getZindex () + 1;
Return _ winBgZindex;
}
Var _ renderBg = function () {// rendering background www.jb51.net
Var _ winBgZindex = _ geWinBgZindex ();
// Alert ($ (document). height ());
$ ('Body'). append ('

'); // Insert a translucent background into the body
Watermark ({height: _ domHeight, width: _ domWidth, opcity: 03660000.css ('z-Index', _ winBgZindex). fadeTo (_ times, 0.7 );
}
Var _ creatWin = function () {// create a form
$ ('Body'). append ('

');
_ RenderContent (_ content); // render the pop-up window subject
_ InitWin (); // initialize the form
}
Var _ initWin = function () {// initialize the form
Var _ winZindex = _ getWinZindex ();
Var _ transHeight = 0;
If (_ height = 'auto '){
_ TransHeight = 'auto ';
} Else {
_ TransHeight = parseInt (_ height) + 'px ';
}
Detail ('privacy 'privacy _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 (); // locates the form
}
Var _ locationWin = function () {/* locate topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, botshortenter, bottomRight */
Var _ interval wheight = parseInt ($ (window). height ());
Var _ Empty wwidth = parseInt ($ (window). width ());
// Alert (_ Your wwidth + _ height );
Var _ left = (_ blank wwidth-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) {// render the pop-up window subject
$ ('#' + _ This. ID). append (content );
}
Var bindEvent = function () {// bind event
If (_ this. status! = 'Kill '& _ this. status! = 'Init '){
If (_ closeButton! = Undefined & _ closeButton! = ''& _ CloseButton! = False ){
$ ('#' + _ This. ID + ''Your _closebutton).css ('cursor', 'pointer '). live ('click', function (e ){
_ This. unDisplay ();
});
} // If the close button is set
If (_ killButton! = Undefined & _ killButton! = ''& _ KillButton! = False ){
$ ('#' + _ This. ID + ''character _killbutton#.css ('cursor', 'pointer '). live ('click', function (e ){
_ This. kill ();
});
} // If the kill button is set
}
If (_ lock = false ){
$ ('#' + _ This. ID). draggable ({cancel :''});
}
}
/******************** This class of private functions ************** ***/


/********************** Public functions of this class ************* *****/
This. status = 'init '; // The Current status init-> initialization status, display-> display status, undisplay-> undisplay status, and kill-> kill status.
This. ID = '';
Var _ ID = settings ['id'];
If (_ ID = ''| (typeof _ ID) = undefined ){
Throw new Error ('Id cannot be blank ');
} Else {
This. ID = 'popbox _ '+ _ ID;
}
This. display = function () {// display the function. If the status is init or kill, re-render the page.
// Alert (_ this. status );
If (_ this. status = 'init '| _ this. status = 'Kill '){
_ CreatWin (); // create a form
// (('{'{_This.id}.css ('height', _ domHeight );
If (_ shadow = true) {// specifies the rendering mask.
/* 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 () {// permanently remove
// Alert (_ this. status );
// Alert (_ this. status );
If (_ this. status = 'Kill '| _ this. status = 'init '){
// Alert (_ this. status );
Throw new Error ('invalid operation, the current status does not allow 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 () {// hide a function
If (_ this. status = 'init '| _ this. status = 'Kill '){
Throw new Error ('invalid operation, current status does not allow undisplay ');
}
If (_ unDisplayCallBack! = Undefined ){
_ UnDisplayCallBack ();
}
$ ('#' + _ This. ID). fadeOut (_ times );
$ ('#' + _ This. ID + '_ bg'). fadeOut (_ times );
_ This. status = 'undisplay ';
}
/********************** Public functions of this class ************* *****/


} // PopBox webpage pop-up window

Var errorBox = function (errorMsg ){
// Alert (typeof errorBox );
// Alert (errorBox. length );
Var errorObj = new popBox ({
ID: 'errobj ',
BgColor: '# fff ',
Width: 300,
MoveHandle: false,
CloseButton: false,
Height: 'auto ',
Times: 200,
Lock: true,
Content: Contents ('invalid errorboxcontent'{.html (),
Shadow: true,
Position: 'center ',
DisplayCallBack: function (){
('{'{Errorobj.id}.find('.errormessage'{.html ();
('{'{Errorobj.id}.find('.errormessage'{.html (errorMsg );
$ ('#' + Errobj. ID). find ('. errorConfirm input'). click (function (){
// Alert ('where ');
ErrorObj. kill ();
});
},
UnDisplayCallBack: function (){
Throw new Error ('error cannot be closed, but can be killed '); // The Error method can only be killed and cannot be closed.
},
KillCallBack: function (){
// ErrorBox = null;
}
});
ErrorObj. dispaly ();
} // Error pop-up window