SimpleModal - simple modal windows

Overview plugin SimpleModal, its glitches, getting rid of the glitch, positioning on the center of the screen and other amenities. In general, I published an article in my blog: “SimpleModal is a simple modal window,” but I thought that habrayers might be interested to know about it. And I also advise you to take a look at the newer article “Modal windows on jQuery blockUI” . Not all play lightboxes.

Getting started to use

Plugin data:

• title: simplemodal
• size: 10kb without compression
• by Eric Martin
• website: http://www.ericmmartin.com/projects/simplemodal/
• Download: http://simplemodal.googlecode.com/files/jquery.simplemodal-1.1.1.js
• demo: http://www.ericmmartin.com/simplemodal-test/

This case looks like this:



In order for the plugin to work it must be connected:
<script src = "jquery.simplemodal.js" type = "text / javascript" > </ script>
')
And also specify the styles for the overlay (gray area), the container (the window itself) and the close buttons.

#modalOverlay {
background-color:#000; /* */
cursor:wait; /* */
filter: alpha(opacity=80); /* */
height: 100%;
}

#modalContainer {
height:auto; /* */
width:300px;
left:50%; /* margin-left, */
top:50%; /* , margin-top, */
margin-left:-150px;
/* margin-top: -70px; */
background-color:#fff;
border:3px solid #ccc;
padding: 10px;
}
a.modalCloseImg {
background:url(x.png) no-repeat;
width:25px; /* , . */
height:29px;
display:inline;
z-index:3200;
position:absolute;
top:0px;
right:0px;
cursor:pointer;
}

Unfortunately, there are some glitches in the plugin. For example, in opera, if the content of the page is shorter than the page itself, then when you close the window at the bottom there is a gray area. And in IE, it is sometimes not painted at all.



However, this is solved quite simply. Add style to page

#helper {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -10;
}


And we insert in any place of the page:

< div id ="helper" ></ div >

With this we achieve browser redrawing of our document when closing a modal window.

We make a convenient notification

First, we will make the window be in the middle of the page. In my example, I limited the width to 300px, but the height can vary. The top: 50% CSS property really lowers the window to the middle of the page, but the modal window itself goes just below the middle. If we specified the height in pixels, for example 150px, we could raise the window above the center with the help of the margin-top: -75px. But the window will be rubber, and we will use another plug-in for this: Dimensions. Plugin data:

• name: Dimensions
• size: 3kb without compression
• website: http://docs.jquery.com/Plugins/dimensions
• Download: http://plugins.jquery.com/files/dimensions_1.2.zip
• demo: http://brandonaaron.net/docs/dimensions/#code-samples

This plugin allows us to measure the height of the window, respectively, and calculate half the height and raise the window above the center of the web page by this number of pixels.

< script type ="text/javascript" src ="jquery.dimensions.js" ></ script >

Hooked up. Now we open the plugin file Simplemodal (jquery.simplemodal.js), yes, yes, we will fix the plugin. If our versions match, then on line 294 there will be an open function. We go to its very end, right after this.bindEvents (); and before the closing brace set

< pre name ="code" class ="js" >
$('#modalContainer').css('margin-top',-$('#modalContainer').outerHeight()/2-50);
</ pre >

I deliberately took away from the height of another 50 pixels, I think it adds convenience. But you can experiment. There are very few. Add somewhere at the end of the page.

< div id ="message" style ="display: none; text-align: center;" >
< div id ="messageText" > </ div >< br />< br />
< input type ='button' value ='Ok' class ='modalClose' style ='height: 30px; width: 60px;' />
</ div >


Notice that the button has a class = 'modalClose'. You can create in the diva any other object with this class - clicking on it will close the window. All the preparations are over. It remains only to use it. For example:

< script type ="text/javascript" >
$( document ).ready( function () {
$( '#messageText' ).html( ' !' );
$( '#message' ).modal();
});
</ script >

And when loading the page we will see



Hooray, we did it.

Demo: see