[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?
Tags: Ajax/DHTML, CSS, CSS Walkthrough, Facebox, jQuery, Modal Window, Thickbox
Posted in Ajax/DHTML | 40 Responses » | View blog reactions
]
