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
113 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: Tomas spoken by: 包二奶 spoken by: pio spoken by: SEO Hyderabad spoken by: Nick spoken by: spis firm spoken by: Gallery Background Fade Fuctions – using code 06/08/2011 | CEG BUGS spoken by: website designing in hyderabad spoken by: Theodore Mckeague spoken by: phentermine qualis spoken by: Reva Finau spoken by: Jacalyn Tilow spoken by: Philip Rohm spoken by: Janis Michalek spoken by: learn more spoken by: Rak spoken by: nagesh spoken by: Jamie Bublitz spoken by: Jenn spoken by: Property management riverside spoken by: SIm spoken by: Jocelyn Pacius spoken by: Shirley Footer spoken by: kirti spoken by: Tamekia Nuss spoken by: Karan spoken by: Johnny Thau spoken by: mac brushes spoken by: replacement battery for dell inspiron 6000 spoken by: Cordell Latshaw spoken by: hp laptop cpu fan spoken by: Freelancer in Hyderabad spoken by: Dominique spoken by: Diego spoken by: Abhicandra Swami spoken by: Ashley Alex spoken by: Jospeh Midthun spoken by: Jordan Chroman spoken by: Stephen Ajose spoken by: Malorie Prukop spoken by: Sergio spoken by: najlepsze hmb sfd spoken by: suplena formula spoken by: Harris Forbes spoken by: the secret to bypass spoken by: muscle gain spoken by: Buy Oranges spoken by: Web Hosting spoken by: Web Design Company Riverside spoken by: Caleb Caspary spoken by: http://www.zijaextreme.com spoken by: Sofia spoken by: Edi spoken by: Mca Scam spoken by: Lighting design spoken by: fat loss factor review spoken by: turbulence training review spoken by: HERBAL POTOURRI INCENSELeave a Reply