A Simple Modal
author: tom
Updated – Version Available
[See a demo here]
Modal windows seem to be the rage these days and somewhat synonymous with “Web 2.0.” And yes, options exist, whether it be Lightbox, Thickbox, or .NET AJAX — to name a few. Recently, Facebox has emerged as a very promising contender. The aforementioned plugins/widgets have proven their usefulness to many developers during their life course. In fact they one might even go so far as to deem “standard” to the plugin of choice.
Yet, what if a scenario arises where you do not need such full featured capability? After all, most of the plugins out there come with their own CSS along with the JavaScript. This is not to say that CSS wouldn’t be necessary if one were to create a homegrown solution. The fact remains that their is still integration work involved.
Therefore, my aim in this post is to illustrate a simple example of leveraging the jQuery framework to create a simple iFrame modal window. Of course a polished plugin will be more robust, however, robust is at times overkill. It is at that point where simplicity comes into play and thus the forthcoming example.
Defining the Basics
First we create an object in JavaScript to encapsulate some core methods and properties that we could potentially reuse.
var modalWindow = {
parent:"body",
windowId:null,
content:null,
width:null,
height:null,
close:function()
{
$(".modal-window").remove();
$(".modal-overlay").remove();
},
open:function()
{
var modal = "";
modal += "<div class=\"modal-overlay\"></div>";
modal += "<div id=\"" + this.windowId + "\" class=\"modal-window\" style=\"width:" + this.width + "px; height:" + this.height + "px; margin-top:-" + (this.height / 2) + "px; margin-left:-" + (this.width / 2) + "px;\">";
modal += this.content;
modal += "</div>";
$(this.parent).append(modal);
$(".modal-window").append("<a class=\"close-window\"></a>");
$(".close-window").click(function(){modalWindow.close();});
$(".modal-overlay").click(function(){modalWindow.close();});
}
};
Notice that only three CSS classes need to be defined, “.modal-window”, “.modal-overlay”, and “.close-window”. Because of the fact that we are trying to keep things simple, I’ve decided not to check to null’s in required properties (windowId, content, width, height).
Basic Design
Next the three classes from above need to be defined. The “.modal-overlay” class is the layer that covers the current view and serves as a backdrop for the modal window. “.modal-window” is obviously the window itself. In this case, the modal-window class is very generic since we will rely on the styling in the transparent iFrame for design. Lastly, I chose to implement a close graphic which is displayed using the “.close-window” class. Again, this is very basic.
.modal-overlay
{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
height:100%;
width:100%;
margin:0;
padding:0;
background:#fff;
opacity:.75;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
z-index:101;
}
.modal-window
{
position:fixed;
top:50%;
left:50%;
margin:0;
padding:0;
z-index:102;
}
.close-window
{
position:absolute;
width:32px;
height:32px;
right:8px;
top:8px;
background:transparent url('/examples/modal-simple/close-button.png') no-repeat scroll right top;
text-indent:-99999px;
overflow:hidden;
cursor:pointer;
opacity:.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}
.close-window:hover
{
opacity:.99;
filter: alpha(opacity=99);
-moz-opacity: 0.99;
}
The Grand Opening
Now that we have set some basic styles and defined our core functionality, we can open a new modal window to display our iframe.
var openMyModal = function(source)
{
modalWindow.windowId = "myModal";
modalWindow.width = 480;
modalWindow.height = 405;
modalWindow.content = "<iframe width='480' height='405' frameborder='0' scrolling='no' allowtransparency='true' src='" + source + "'></iframe>";
modalWindow.open();
};
Implement
<a href="/example/modal-simple/modal.html" target="_blank" onclick="openMyModal('/example/modal-simple/modal.html'); return false;">Click here to open</a>
Implementation is simple, just make a call to the method created earlier with the source of the modal window.
Beyond Simple ‘Modaling’
As stated at the outset, this post was meant to illustrate a bare bones and simple example of a modal window. If you wanted to extend the functionality for example, it would be quite simple to create more “openMyModal” methods to suit needs. So if Facebox or Thickbox are too much for your application, why not try the simple approach?
Updated – Version Available
Apr 25 2008
56 Responses
spoken by: Jeremy spoken by: tom spoken by: Sumanta Ghosh spoken by: tom spoken by: Draco spoken by: abdala spoken by: Mark spoken by: kmitchell spoken by: tom spoken by: mariusj spoken by: Sand spoken by: Gorkfu spoken by: Stjepan spoken by: Ararat spoken by: Editors Choice» Blog Archive » A Simple Modal spoken by: theamoeba spoken by: theamoeba spoken by: krishna spoken by: LimpMan spoken by: tom spoken by: brian spoken by: Ric spoken by: Markus spoken by: tom spoken by: Markus spoken by: krishna spoken by: Ararat spoken by: tom spoken by: tom spoken by: Ararat spoken by: Kyle spoken by: junu spoken by: Ashish spoken by: Hector spoken by: Heiko spoken by: pragan spoken by: padma spoken by: Utilizando o plugin SimpleModal Contact Form (SMCF) | Vinícius de Paula spoken by: Jmc spoken by: Chris Robinson spoken by: PerfectWeb spoken by: tom spoken by: Drew81 spoken by: martijn spoken by: tom spoken by: Akbar Ehsan spoken by: Akbar Ehsan spoken by: Pavel spoken by: Pavel spoken by: tom spoken by: abhik spoken by: 網站製作學習誌 » [Web] 連結分享 spoken by: Ab spoken by: ararat spoken by: UndoCreations spoken by: TomasLeave a Reply