Write your MooTools-plugin.

Hello.
This is my first serious post on Habre, so criticism is welcome.
Today I will talk about writing a plugin for JavaScript libraries like MooTools for example, modal pop-UPS.

HTML, CSS.

What is it like to represent our modal window? Schematically it can be represented as follows.



From the point of view of HTML, the popup window is a normal block element (e.g. div) and another block element to create a translucent overlay. Functional HTML-code will contain only two lines:

<div id="Overlay"></div>
<div id="Popup">the Message in the window.</div>

The CSS code will look like this:

the body
{
font-family: Arial, Tahoma, Sans-Serif;
font-size: 1em;
}

#Popup
{
visibility: hidden;
position: absolute;
left: 50%;
top: 50%;
background-color: #FFF;
padding: 10px;
}

#Overlay
{
visibility: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
background-color: #000;
}

With visibility: hidden we intentionally hide the popup and the overlay, so they didn't show immediately after the page is loaded. The attentive reader might notice that the overlay at the moment of zero height and a pop-up window is not in the center of the page (because the page posted upper left corner of the window). All that we fix in JavaScript.

JavaScript.

Now for the JavaScript code.
Perhaps, to fully describe the syntax of the classes in MooTools, I will not, here given a rather full description. Let's just take a look at the frame class, which will take to write a plugin to quickly figure out what's what:

var MoodalBox = new Class({
// Here we specify the classes from which our class will copy properties and methods.
// In this case we need a method setOptions() class Options.
Implements: [Options]

// Enumerated options passed to the class instance and their default values.
options: {
optionName1: defaultValue1,
optionName2: defaultValue2
},

// This is the constructor of our future class.
initialize: function(options)
{
// set the values of options passed to the constructor
// (if there is nothing given, take the default values).
this.setOptions(options);

// follows the logic of the constructor.
}
});

Now complicate this frame three new methods: show (show window), hide (hide) setPosition (positioning window), will also think of a more intelligent options and add some arguments to the constructor:

var MoodalBox = new Class({
Implements: [Options]

// let us two options.
options: {
// Opacity of the overlay after displaying a pop-up window.
destinationOverlayOpacity: 0.7,

// hide the window by clicking the overlay.
allowManualClose: true
},

// In the constructor pass two mandatory argument and an optional argument with options.
// element — the element ID of the window.
// overlay the ID of the element overlay.
initialize: function(element, overlay, options)
{
this.setOptions(options);

// Get the element by its ID.
this.overlay = $(overlay);

// Check the option the possibility to hide the window on click.
if (this.options.allowManualClose)
// Catch the click on the overlay hide method.
// note: the bind function(param) method returns this.hide, inside which the this variable
// bound to the param. If you omit the call to bind, then this inside of this.the hide will be linked to the item
// event in which we process, i.e. to this.overlay.
this.overlay.addEvent("click" this.hide.bind(this));

// Get the window size for subsequent alignment.
this.targetCoords = this.element.getCoordinates();

// Effects for showing/hiding the window and the overlay.
// Use the effect of changing the given CSS property in time, which in this case is transparency.
this.fx = {
overlayAnimation: new Fx.Tween(this.overlay, { property: "opacity" })
elementAnimation: new Fx.Tween(this.element { property: "opacity" })
}
},

// Calling this method will show a popup window.
show: function()
{
// Arrange items in the right places.
this.setPosition();

// start the animation of the display (change the transparency to visible values).
this.fx.overlayAnimation.start(0, this.options.destinationOverlayOpacity);
this.fx.elementAnimation.start(0, 1);
},

// Calling this method will hide the popup window.
hide: function()
{
// start the hide animation (change of a transparency to invisible values).
this.fx.overlayAnimation.start(this.options.destinationOverlayOpacity, 0);
this.fx.elementAnimation.start(1, 0);
},

// Here we adjust the position of the popup window on the page and
// the size of the overlay.
setPosition: function()
{
this.element.setStyles({
"marginLeft": -(this.targetCoords.width / 2)
"marginTop": -(this.targetCoords.height / 2)
});

this.overlay.setStyles({
"top": window.getScrollTop ()
"height": window.getHeight()
});
}
});

To use the class, create its instance and add to page button, clicking on which will show the window. The result of the HTML code looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mootools plugin</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="./Style.css" rel="Stylesheet" type="text/css" />
<!-- To work you need to connect the library Mootools. -->
<script src="../../MooToolsCore.js" type="text/javascript" language="javascript"></script>
<script src="./MoodalBox.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
//<![CDATA[
var popupFx = null;

// Create an instance of the plugin after loading the DOM model.
// In the constructor pass the element IDs of the window and the overlay.
window.addEvent("domready" function() { popupFx = new MoodalBox("Popup" "Overlay"); });
//]]>
</script>
</head>
<body>
<input type="button" value="Show popup" onclick="popupFx.show();" />
<div id="Overlay"></div>
<div id="Popup">the Message in the window.</div>
</body>
</html>

To see how this works, you can here. And what to do with the options that you can change? We simply pass to the constructor as an object. For example, you can change transparency of overlay after displaying the window:

popupFx = new MoodalBox("Popup" "Overlay" { destinationOverlayOpacity: 0.3 });

More interesting results can be achieved by using the class Fx.Morph, which changes in time multiple CSS properties. The result with animation of sizes are available here. If you liked the article — I will write more.

P. S. All of the CSS code could not allocate in a separate file, and to encapsulate in a JavaScript class, but that class had grown an extra call changes the CSS properties of the element and it would be harder to catch the essence.

Cross-post from my blog.

Summarize the reference.

Simple example.
an Example with animation size.

UPD. Mirror (thanks to habracut):
Simple example.
an Example with animation size.

UPD. Sorry for hosting, can anyone advise what-thread good and free... Here here archive with all the examples.

Article based on information from habrahabr.ru