Imitation windows shutdown Effect: Encapsulating Lightbox Class

When the data is initialized, a Lightbox object is created for each link that can be highlighted. The code for this class is specifically implemented as follows:

var lightbox = Class.create ();


Lightbox.prototype = {


ypos:0,


xpos:0,


//constructor method, Ctrl to create the element of the object


initialize:function (ctrl) {


//Assign the link of the element to This.content


this.content = ctrl.href;


//Add the OnClick event activate method for the element


Event.observe (CTRL, ' click ', This.activate.bindAsEventListener (this), false);


Ctrl.onclick = function () {return false;};


　　　　　 },


//When a link is clicked


activate:function () {


if (browser = = ' Internet Explorer ') {//judged as IE browser


This.getscroll ();


this.prepareie (' 100% ', ' hidden ');


This.setscroll (0,0);


This.hideselects (' hidden '); hide all <select> marks


　　　　　　　　　 }


//Call the Displaylightbox method in the class


This.displaylightbox ("block");


　　　　　 },


prepareie:function (height, overflow) {


bod = document.getelementsbytagname (' body ') [0];


bod.style.height = height;


bod.style.overflow = overflow;


htm = document.getelementsbytagname (' html ') [0];


htm.style.height = height;


htm.style.overflow = overflow;


　　　　　 },


hideselects:function (visibility) {


selects = document.getElementsByTagName (' select ');


for (i = 0; i < selects.length; i++) {


selects[i].style.visibility = visibility;


　　　　　　　　 }


　　　　　 },


getscroll:function () {


if (self.pageyoffset) {


this.ypos = Self.pageyoffset;


} else if (document.documentelement && document.documentElement.scrollTop) {


this.ypos = Document.documentElement.scrollTop;


} else if (document.body) {


this.ypos = Document.body.scrollTop;


　　　　　　　　 }


　　　　　 },


setscroll:function (x, y) {


Window.scrollto (x, y);


　　　　　 },


displaylightbox:function (display) {


//Will overlay display


$ (' overlay '). style.display = display;


//Display the highlight layer


$ (' Lightbox '). style.display = display;


//If it is not hidden, call the Loadinfo method in the class


if (display!= ' None ') this.loadinfo ();


　　　　　 }


//This method sends an AJAX request


loadinfo:function () {


///When the request completes, call the ProcessInfo method in this class


var myajax = new Ajax.request (


This.content,


{method: ' Get ', Parameters: "", OnComplete:this.processInfo.bindAsEvent Listener (This)}


　　　　　　　 );


　　　　　 },


//Displays the returned text information to the highlight layer


processinfo:function (response) {


//Get the returned text data


var result = Response.responsetext;


//display to highlight layer


info = "<div id= ' lbcontent ' >" + result + "</div>";


//Inserts an element before the info element


New Insertion.before ($ (' lbloadmessage '), info)


//Change the value of the element's class name


$ (' Lightbox '). ClassName = "Done";


//Call the actions method in this class


This.actions ();


var ctrl=$ (' Lightbox ');


//Add event handling method for highlight layer reset


Event.observe (CTRL, ' click ', This.reset.bindAsEventListener (this), false);


Ctrl.onclick = function () {return false;};


　　　　　 },


//Restore Initial state


reset:function () {


//Hide cover layer


$ (' overlay '). style.display= "None";


//Empty return data


$ (' lbcontent '). innerhtml= "";


//Hide Highlight layer


$ (' Lightbox '). style.display= "None";


　　　　 },


//Search through new links within the Lightbox, and attach click event


actions:function () {


lbactions = document.getelementsbyclassname (' lbaction ');


for (i = 0; i < lbactions.length; i++) {


Event.observe (Lbactions[i], ' click ', This[lbactions[i].rel].bindas eventlistener (this), false);


Lbactions[i].onclick = function () {return false;};


　　　　　　　 }


　　　　 }


　　 }

Tip: Because this object is more complex, readers can read the comments section of the code carefully.