Click here to Skip to main content
14,982,408 members
Articles / Web Development / CSS
Posted 2 Jun 2006


89 bookmarked

Modal Dialog - Enhanced

Rate me:
Please Sign up or sign in to vote.
4.54/5 (34 votes)
8 Jun 2006CPOL4 min read
In this article, we will try to generate a draggable DHTML layer that loads data from an external URL via an XMLHTTP connection. This is an enhanced version of my previous Draggable Layer article, hence it addresses additional issues that are not present in the former article.

Sample Image - ModalDialogV2.gif


This article can be considered as a follow up to my former article: Modeling a Draggable Layer and Loading Dynamic Content to it via XML HTTP. Have a look at it, if you have not done already, so that you can catch up faster.

In this article, we will try to:

  • Create a cross-browser, draggable DHTML modal dialog.
  • Send an AJAX request using HTTP-POST.
  • Get the response and display it inside the modal dialog.

And best of all, we will do all these in less than 20 lines of code, with the help of the sardalya API.

Please note that the API enclosed in this article's source archive is a rather simplified version of sardalya. You can visit sardalya's website for its latest full version.

Before starting, you may want to see the final result in action first.

Creating the View

The HTML of our ModalDialog is fairly simple:

<div id="ModalBG"></div>
<div id="DialogWindow">
  <div id="DialogHeader">
    <span id="DialogTitle">Title comes here</span>
    <img id="DialogActionBtn" src="icn_close.png" 
          alt="close icon" title="" />
  <div id="DialogIcon"><img id="DialogIcon" 
     src="icn_alert.png" alt="alert icon" title="" /></div>
  <div id="DialogContent">...</div>

"ModalBG" is a layer that is placed between the page content and the ModalDialog window so that we prevent accidental clicks on other page elements, and at the same time, put some visual emphasis on the ModalDialog by fading the page in the background.


To make our "dialog window" layer resemble an actual modal dialog, we need some CSS tweaks:

 border: 1px #FFFFFF outset;
 width: 550px;
 display: none;
 background: #FFFFFF;
 z-index: 1000;
 position: absolute;
 top: 0;
 left: 0;
 float: right;
 margin-right: 10px;
 margin-bottom: 10px;
 margin-top: 24px;
 width: 450px;
 display: block;
 font-size: 90%;
 padding: 10px;
 float: left;
 border-bottom: 1px #00449E outset;
 background: #00449E;
 text-align: right;
 float: left;
 padding: 8px;
 color: #FFFFFF;

And we need an "Opacity.css" for transparency support:


With the help of this CSS, our boxes will pretty much look like a modal dialog, except for certain browsers:

Be Kind to Opera

I hear you say, "Why am I to be kind to Opera all the time? Why is Opera never kind to me?!" and I truly understand you :). But let us be kind to Opera once again:

To make our transparent background work on Opera, we need several more CSS tweaks:

/* transparency support for Opera */
 background-image: url("maskBg.png") !important;

That's it! Opera does not understand CSS transparency, but it fully supports .png transparency, therefore a transparent mask as a background will make our ModalDialog work equally good in Opera.

There is one remaining issue here. We need to selectively apply this class if and only if the user agent is Opera. That is, other browsers such as Mozilla does not require this transparency hack, and we should not use the "modalOpera" class if our user agent is one of them. We will address this issue in a second.

The Script

First of all, we need to prepare the modal dialog at page load:

  /* Sweep unnecessary empty text nodes. */

   * Attach supporting css bind required
   * classes for transparency support in Opera.
  /* Attach opacity css. */
  /* Adjust height. */

  /* Create the modal dialog */
  g_Modal=new ModalDialog("ModalBG","DialogWindow",

  /* Bind an event listener to double-click event. */
  /* Re-adjust height on window resize */

sweep is a utility method of sardalya's DOMManager object. It removes empty text nodes from the DOM structure.

Now, let us look at other methods one by one:

function addExtensionsForOpera()
  /* classes for opera */
  var ModalBG=new CBObject("ModalBG").getObject();

As seen, we only append the "modalOpera" class name to "ModalBG" if the user agent is Opera.

Note that we do not sniff the user agent (navigator.userAgent) but do an "object detection" instead (window.opera).

Browsers love to fool scripts by sending false user agent strings and therefore object detection is the way to go. Although details of it is the subject of an entire article, I can say that browser sniffing is so '90s. As a rule of thumb, always use object detection.

Then comes attaching the opacity CSS piece:

function attachOpacityCSS()
   * CSS for opacity support
   * Note that this can be directly added to the body.
   * If you do not care about blindly adhering to standards
   * you can directly include the rules into Master.css
   * Do I care? Yes and No.(visit <a href="%22"></a>
   * to learn how I feel about it).
    var opacityCSS = document.createElement("link");

And the height adjustment:

function adjustHeight()
  /* get the available height of the viewport */
  var intWindowHeight=WindowObject.getInnerDimension().getY();
  var dynModalBG=new DynamicLayer("ModalBG");
  var intModalHeight=dynModalBG.getHeight();
   * if modal background's height is less than the viewport's 
   * available height, increase its height.

Then we create the modal dialog in just a single line:

g_Modal=new ModalDialog("ModalBG","DialogWindow",

"ModalBG" is the ID of the transparent background, "DialogWindow" is the ID of the modal dialog container, "DialogContent" is where messages are displayed when calling the show method of ModalDialog, and "DialogActionBtn" is the ID of the close button.

And finally, we attach a double-click event to the document which will trigger an AJAX action:

/* Bind an event listener to double-click event. */

Now let us have a look at the document_dblclick method:

function document_dblclick(evt)
  /* create an AJAX request */
  var ajax = _.ajax();

   * Note that _.ajax(); is a shorthand notation 
   * for new XHRequest();
   * Visit <a href="%22"></a> for details.

   * You can add as many fields as you like to the post data. 
   * Normally the server will use this data to create an
   * output that makes sense which may be an XML, a JSON String
   * or an HTML String.

  /* These events will be fired when server posts back a response. */

  /* Set a default waiting message. */"Fetching data... Please wait...");

   * Disable close action if you want to force the user 
   * to wait for the outcome of the AJAX request.
   * Although it is generally not recommended 
   * this may be necessary at certain times.

  /* Post data to the server. */

  /* Stop event propagation. */
  new EventObject(evt).cancelDefaultAction();

The comments should be self-explanatory.

And finally, the two methods that are triggered after the server's post back:

/* Triggered when a successful AJAX response comes from the server.*/
function ajax_complete(strResponseText,objResponseXML)
  /* Re-activate close button. */

/* Triggered when server generates an error. */
function ajax_error(intStatus,strStatusText)
{"Error code: ["+ intStatus+ "] error message: [" + 
   strStatusText + "].");

  /* Re-activate close button. */

That's it!

What About those Nasty SELECTs ?

The ModalDialog object internally handles it, by replacing them with SPAN elements with the class "modalWrap" whenever ModalDialog opens. This sorts out the well known "SELECTs bleed through my top layer" issue.

Here is the CSS of it for the sake of completeness:

 border: 2px #ffffcc inset;

You can add as many rules as you like to it. The more the SPAN resembles a SELECT element, the better (you can apply width and line-height, set display to inline-table... etc., I did not change it too much to keep it simple).

For those who wonder how the replacement of those SPANs and SELECTs are done, the corresponding private method is given below. You can observe the source code of the article's Zip file for more details.

In the former version, we were simply hiding the SELECTs by setting their CSS visibility to hidden. Having tested it in real-life scenarios, I saw that the "all of a sudden" disappearance of SELECTs was annoying to some of the users.

In my opinion, transforming the SELECTs is much better than hiding them completely.

... And no, I do not want to use IFRAMEs :)

Here follows the code:

 var arSelect = document.getElementsByTagName("select");
 var len=arSelect.length;
 var objSel=null;
 var strNodeValue="";
 var objSpan=null;
 var o=null;

 for(var i=0;i<len;i++)

  objSpan=new CBObject("_ModalWrap");


   new DynamicLayer(objSpan).collapse();
   new DynamicLayer(objSel).expandInline();
   new DynamicLayer(objSpan).expandInline();
   new DynamicLayer(objSel).collapse();


In conclusion, we modeled and created a draggable DHTML modal dialog and established an AJAX connection to an external script; we did some cross-browser tweaks to make our application work on as many browsers as possible, and we did some OO coding.

And as always, happy coding!


  • 2006-06-02: Article created.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Web Developer
Turkey Turkey
Volkan is a java enterprise architect who left his full-time senior developer position to venture his ideas and dreams. He codes C# as a hobby, trying to combine the .Net concept with his Java and J2EE know-how. He also works as a freelance web application developer/designer.

Volkan is especially interested in database oriented content management systems, web design and development, web standards, usability and accessibility.

He was born on May '79. He has graduated from one of the most reputable universities of his country (i.e. Bogazici University) in 2003 as a Communication Engineer. He also has earned his Master of Business Administration degree from a second university in 2006.

Comments and Discussions

GeneralAvoid postback when we use master Page Pin
Member 301279723-Apr-10 4:31
MemberMember 301279723-Apr-10 4:31 
Questioncommercial website Pin
VBNewB116-Oct-09 8:10
MemberVBNewB116-Oct-09 8:10 
GeneralPlease help me... Pin
monmagallanes26-Sep-07 23:28
Membermonmagallanes26-Sep-07 23:28 
GeneralMessage Closed Pin
1-Sep-08 17:09
Membermayurmv1-Sep-08 17:09 
GeneralBug in the convert dropdown JavaScript [modified] Pin
Mike McPhail14-Aug-07 9:52
MemberMike McPhail14-Aug-07 9:52 
GeneralRe: Bug in the convert dropdown JavaScript Pin
Mike McPhail17-Aug-07 10:42
MemberMike McPhail17-Aug-07 10:42 
GeneralRe: Bug in the convert dropdown JavaScript Pin
volkan.ozcelik20-Aug-07 2:40
Membervolkan.ozcelik20-Aug-07 2:40 
Generalonclick Pin
lolik413-May-07 13:31
Memberlolik413-May-07 13:31 
GeneralRe: onclick Pin
volkan.ozcelik13-May-07 23:38
Membervolkan.ozcelik13-May-07 23:38 
GeneralRe: onclick Pin
lolik414-May-07 6:49
Memberlolik414-May-07 6:49 
GeneralRe: onclick Pin
volkan.ozcelik15-May-07 13:46
Membervolkan.ozcelik15-May-07 13:46 
QuestionCan't use for comercial purposes?? Pin
chezchez25-Mar-07 15:07
Memberchezchez25-Mar-07 15:07 
AnswerRe: Can't use for comercial purposes?? Pin
volkan.ozcelik25-Mar-07 17:19
Membervolkan.ozcelik25-Mar-07 17:19 
GeneralRe: Can't use for comercial purposes?? Pin
chezchez25-Mar-07 17:49
Memberchezchez25-Mar-07 17:49 
Generaltriggering off of button... Pin
interclubs13-Feb-07 5:23
Memberinterclubs13-Feb-07 5:23 
AnswerRe: triggering off of button... Pin
volkan.ozcelik13-Feb-07 7:30
Membervolkan.ozcelik13-Feb-07 7:30 
GeneralRe: triggering off of button... Pin
interclubs13-Feb-07 15:23
Memberinterclubs13-Feb-07 15:23 
AnswerRe: triggering off of button... Pin
volkan.ozcelik13-Feb-07 18:26
Membervolkan.ozcelik13-Feb-07 18:26 
GeneralTo be mentioned Pin
Member 144565731-Jan-07 17:01
MemberMember 144565731-Jan-07 17:01 
AnswerRe: To be mentioned Pin
volkan.ozcelik2-Feb-07 8:15
Membervolkan.ozcelik2-Feb-07 8:15 
GeneralThere seems to be a problem with Buttons on the popup Pin
Sandeep Adi28-Dec-06 6:15
MemberSandeep Adi28-Dec-06 6:15 
QuestionRe: There seems to be a problem with Buttons on the popup Pin
volkan.ozcelik8-Jan-07 10:36
Membervolkan.ozcelik8-Jan-07 10:36 
GeneralRe: There seems to be a problem with Buttons on the popup Pin
Sandeep Adi9-Jan-07 8:42
MemberSandeep Adi9-Jan-07 8:42 
GeneralModal Dialog not staying Modal Pin
Komil10-Nov-06 4:49
MemberKomil10-Nov-06 4:49 
GeneralRe: Modal Dialog not staying Modal Pin
volkan.ozcelik10-Nov-06 7:56
Membervolkan.ozcelik10-Nov-06 7:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.