Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create Modal Window with jQuery and CSS3

We will learn today the process to create a simple Modal window in a web page making use of jQuery and CSS3.

A common need in a web application is to open a separate window to display some information or get input. As most modern browsers have popup blockers, it is difficult to use window. Open reliably, and it also detracts from the user experience.

A better solution is to have a modal dialog that pops up within the same page over the current content. You see this very commonly on sites, and it is extremely easy to achieve with jQuery UI, a library that adds rich UI elements to jQuery, such as dialog boxes, date and color pickers, buttons, sliders, and tabs.

Popping up a dialog window is a very common scenario in web development, especially in a parent-child kind of UI setup. Most of the times it might contain mostly static content and the dynamic elements in it will be a few text changes. There are use-cases where a jQuery dialog window should open up very dynamic content (including elements rendered) based on certain criteria selected in the parent page.

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.

Listing1: Creating an object in JavaScript

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, we will not 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, we chose to implement a close graphic which is displayed using the “.close-window” class. Again, this is very basic.

Listing2: Code with the modal-overlay, modal-window, class-window class

.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;  
}  

Now that we have set some basic styles and defined our core functionality, we can open a new modal window to display our iframe.
Listing3: Code to display the 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();  
};  

Theming

The jQuery UI Dialog plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.dialog.css stylesheet that can be modified. These classes are highlighed in bold below.

Sample markup with jQuery UI CSS Framework classes

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Dialog content goes here.</p>
   </div>
</div>

Note: This is a sample of markup generated by the dialog plugin, not markup you should use to create a dialog. The only markup needed for that is <div></div>.

Output of example

Figure 1: Output of example

Conclusion

The tutorial focussed on how we can create a simple modal window making use of jQuery and CSS3. Hope you liked the article.



Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login