Modal Dialog - enhanced

• Download source files - 64.2 Kb

Introduction

This article can be considered as a follow up to my former Modeling a Draggable Layer and Loading Dynamic Content to it via XML HTTP article. 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 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 web site for the latest full version of it.

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

Creating the View

The HTML of our ModalDialog is fairly simpe:

<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>
  <div id="DialogIcon"><img id="DialogIcon" src="icn_alert.png" alt="alert icon" title="" /></div>
  <div id="DialogContent">...</div>
</div>

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

The CSS

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

Master.css
 
#DialogWindow
{
 border: 1px #FFFFFF outset;
 width: 550px;
 display: none;
 background: #FFFFFF;
 z-index: 1000;
 position: absolute;
 top: 0;
 left: 0;
}
 
#DialogContent
{
 float: right;
 margin-right: 10px;
 margin-bottom: 10px;
 margin-top: 24px;
 width: 450px;
 display: block;
 font-size: 90%;
}

 
#DialogIcon
{
 padding: 10px;
 float: left;
}
 
#DialogHeader
{
 border-bottom: 1px #00449E outset;
 background: #00449E;
 text-align: right;
}
 
#DialogTitle
{
 float: left;
 padding: 8px;
 color: #FFFFFF;
}
 
#DialogActionBtn
{
 cursor:pointer;
}

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

Opacity.css
 
#ModalBG
{
 width:100%;
 display:none;
 background-color:#333333;
 position:absolute;
 top:0;
 left:0;
 height:100%;
 z-index:999;
 opacity:.40;
 filter:alpha(opacity=40)
}

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 never Opera 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:

Master.css
 
/* transparency support for Opera */
.modalOpera
{
 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 only 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 "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:

 window.onload=function()
 {
  /* Sweep unnecessary empty text nodes. */
  DOMManager.sweep();

  /*
   * Attach supporting css bind required
   * classes for transparency support in Opera.
   */ 
  addExtensionsForOpera();
 
  /* Attach opacity css. */
  attachOpacityCSS();
 
  /* Adjust height. */
  adjustHeight();

  /* Create the modal dialog */
  g_Modal=new ModalDialog("ModalBG","DialogWindow",
   "DialogContent","DialogActionBtn");
 

  /* Bind an event listener to double-click event. */
  EventHandler.addEventListener(document,"dblclick",document_dblclick);

 

  /* Re-adjust height on window resize */
  EventHandler.addEventListener(window,"resize",window_resize);
 };

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

Now let us look at other methods one by one

 function addExtensionsForOpera()
 {
  /* classes for opera */
  var ModalBG=new CBObject("ModalBG").getObject();
  if(typeof(window.opera)!="undefined")
  {
   ModalBG.className="modalOpera";
  }
 }

As seen, we only append "modalOpera" className to the "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 soo '90s. As a rule of thumb always use object detection.

Then comes attach 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 http://www.sarmal.com/Exceptions.aspx
   * to learn how I feel about it).
   */
    var opacityCSS = document.createElement("link");
    opacityCSS.type="text/css";
    opacityCSS.rel="stylesheet";
    opacityCSS.href="Opacity.css";
    document.getElementsByTagName("head")[0].appendChild(opacityCSS);
 }

And 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.
   */
  if(intModalHeight<intWindowHeight)
  {
   dynModalBG.setHeight(intWindowHeight);
  }
 }

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

  g_Modal=new ModalDialog("ModalBG","DialogWindow",
   "DialogContent","DialogActionBtn");

"ModalBG" is the ID of transparent background, "DialogWindow" is the ID of modal dialog container, "DialogContent" is where messages is 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. */
  EventHandler.addEventListener(document,"dblclick",document_dblclick);

Now let us have a look at 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 http://sardalya.pbwiki.com/Shortcuts 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.
   */
  ajax.removeAllFields();
  ajax.addField("name","John");
  ajax.addField("surname","Doe");

  /* These events will be fired when server posts back a response. */
  ajax.oncomplete=ajax_complete;
  ajax.onerror=ajax_error;

  /* Set a default waiting message. */
  g_Modal.show("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.
   */
  g_Modal.disableClose();

  /* Post data to the server. */
  ajax.get("externalScript.html");

  /* 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)
 {
  g_Modal.show(strResponseText);
  
  /* Re-activate close button. */
  g_Modal.enableClose();
 }

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

  /* Re-activate close button. */
  g_Modal.enableClose();
 }

That's it!

What about those nasty SELECTs ?

ModalDialog object internally handles it, by replacing them with SPAN elements with 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:

.modalWrap
{
 border: 2px #ffffcc inset;
 background:#ffffcc;
 margin:5px;
}

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" dissappearance of SELECTs was annoying to some of the users.

imho, transforming the SELECTs is much better than hiding them completely.

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

Here follows the code:

_this._replaceCombos=function(blnReplaceBack)
{
 var arSelect = document.getElementsByTagName("select");
 var len=arSelect.length;
 var objSel=null;
 var strNodeValue="";
 var objSpan=null;
 var o=null;

 if(!blnReplaceBack)
 {
  blnReplaceBack=false;
 }
 
 for(var i=0;i<len;i++)
 {
  objSel=arSelect[i];
  strNodeValue=objSel.childNodes[objSel.selectedIndex
  ].childNodes[0].nodeValue;

  objSpan=new CBObject(objSel.id+"_ModalWrap");
  if(objSpan.exists())
  {
   o=objSpan.getObject();
   o.parentNode.removeChild(o);
  }

  objSpan=document.createElement("span");
  objSpan.id=objSel.id+"_ModalWrap";
  objSpan.appendChild(document.createTextNode(strNodeValue));
  objSpan.className="modalWrap";
  objSel.parentNode.insertBefore(objSpan,objSel);

  if(blnReplaceBack)
  {
   new DynamicLayer(objSpan).collapse();
   new DynamicLayer(objSel).expandInline();
  }
  else
  {
   new DynamicLayer(objSpan).expandInline();
   new DynamicLayer(objSel).collapse();
  }
 }
};

Conclusion

In conclusion, we modeled and created a draggable DHTML Modal dialog, 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!

History

• 2006-06-02 : Article created.

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 25 of 52 (Total in Forum: 52) (Refresh) FirstPrevNext

commercial website VBNewB1 9:10 16 Oct '09   Im not too hot on JS, after seeing some of your comments below i thought its best i spend at least several hours trying to figure out how to make your code do what i needed it to do before approaching you! Five hours later and only 10 lines of code to show for it, i changed my "i need help" email to this and learnt one or two things (it was a hard lesson!) lol Anyway, what i now need to ask is, whats the deal with the licencing? Im doing this for a commercial website. Thanks r p.s. great piece of work. rai Sign In·View Thread·PermaLink Working Modal Dialog Window with Javascript mayurmv 6:01 4 Sep '08   Visit post for Modal Dialog & Background at http://developmentzone.blogspot.com[^] Sign In·View Thread·PermaLink Please help me... monmagallanes 0:28 27 Sep '07   Hi, I'm using the code for disabling the parent window while the external page is doing it's embedded process... But I don't know how to close it when the process is finished. I did not put any close button on the modal div... i just want it to automatically close when the process on the included file is done. By the way, I'm using PHP on the included file. You're help will be highly appreciated. Regards, Mon Magallanes Sign In·View Thread·PermaLink Re: Please help me... mayurmv 18:09 1 Sep '08   YOu may also like http://developmentzone.blogspot.com/2008/09/aspnet-javascript-modal-dialog.html Sign In·View Thread·PermaLink 2.00/5 (1 vote) Bug in the convert dropdown JavaScript [modified] Mike McPhail 10:52 14 Aug '07   There is an issue in the code that converts drop down boxes to span elements. The problem is here: strNodeValue=objSel.childNodes[objSel.selectedIndex].childNodes[0].nodeValue; The problem is that when objSel.selectedIndex is < 0 the above line of code fails. The idea is that this happens any time an item is not selected in the drop down list. To fix the problem here is a quick fix: if (objSel.selectedIndex >= 0) strNodeValue=objSel.childNodes[objSel.selectedIndex].childNodes[0].nodeValue; else strNodeValue="Unselected"; If you dont want "Unselected" to show in the spans on the screen you can put whatever text or HTML makes sense. to find the exact place in the sardalya.js file go to line 3190 and look just below there and you will see the place to make the above code change. Hope this is helpful to you all. -- modified at 11:22 Wednesday 15th August, 2007 Mike M. Sign In·View Thread·PermaLink Re: Bug in the convert dropdown JavaScript Mike McPhail 11:42 17 Aug '07   One more note to add on this stuff - I found several other methods where errors occurred in certain obscure situations. For example when moving the mouse around the page and changing the mouse focus from one control to another very quickly caused a java script error in the _this._construct=function() so I placed exception handling code to catch the error preventing the javascript exception from popping up. I highly recommend anyone who uses this library to add exception handling to the sardalya.js using the following syntax try { ... your code here } catch(e) { ... some code to handle exception } You dont have to put any code in the catch block. I just ignored the error and things still worked fine. Mike M. Sign In·View Thread·PermaLink Re: Bug in the convert dropdown JavaScript volkan.ozcelik 3:40 20 Aug '07   Thank you for your information Mike, The sardalya API has evolved a lot after I've written the article. I'll revise your comments when relasing the next stable version. Thanks again for your valuable input. Cheers, Volkan. .: linkibol - in seek of quality links bullishly :. my blog on coding, humor and creativity .: my trials/errors/studies :. sardalya AJAX Framework Sign In·View Thread·PermaLink Lightweight version inchl framework available for download (free) inchl 6:00 12 Jun '07   We would like to inform you that the lightweight version of the inchl framework is released. This release contains full source code and an extended ASP.NET demo application. (please note that this version contains just a minor subset of the full version) Download link: http://www.inchl.nl/lightweight Product information: The inchl framework is a powerfull MVC framework designed to support multiple platforms (ASP.NET and WinForms). Key feature of the framework is its generic way of controlling the userinterface. The full version of the framework will be released shortly. Kind regards, Stephan Smetsers email: stephansmetsers@hotmail.com web: http://www.inchl.nl visit http://www.inchl.nl Sign In·View Thread·PermaLink 1.00/5 (1 vote) onclick lolik4 14:31 13 May '07   please post the exact code for the onclick reqest to call the script through http link. im having troble figuring it out thank you Sign In·View Thread·PermaLink Re: onclick volkan.ozcelik 0:38 14 May '07   >please post the exact code Your order is my command sir Have you tried sniffing the on click event using Firebug? I'm sure you'll catch the onclick event handler in less than a minute. The client side code is pretty self explanatory. And I'd like to teach people how to fish, rather than giving a delicios meal in a golden plate. Kind Regards. .: linkibol - in seek of quality links bullishly :. my blog on coding, humor and creativity .: my trials/errors/studies :. sardalya AJAX Framework Sign In·View Thread·PermaLink 4.00/5 (1 vote) Re: onclick lolik4 7:49 14 May '07   dear Volkan.. so to say i am a visual programmer only, i guess complicated things to my best extent. your script came to be better then all the other modal window scripts, just because i needed to put a transparent png on top... the thing is i have no idea what Firebug is and how to sniff out the onclick event. if u want others to guess please spare me! please send the code to my email akvilonn@gmail.com thank you! Sign In·View Thread·PermaLink Re: onclick volkan.ozcelik 14:46 15 May '07   You can install firebug from: http://www.getfirebug.com/ Since you are visual programmer, the interface will be pretty intuitive for you I believe. Hope that helps. .: linkibol - in seek of quality links bullishly :. my blog on coding, humor and creativity .: my trials/errors/studies :. sardalya AJAX Framework Sign In·View Thread·PermaLink Can't use for comercial purposes?? chezchez 16:07 25 Mar '07   Well, what do you recommend then? I REALLY need a model dialog box as soon as possible. Thanks! Jim Sign In·View Thread·PermaLink 2.00/5 (1 vote) Re: Can't use for comercial purposes?? volkan.ozcelik 18:19 25 Mar '07   Hi Jim, If it was a year ago, I would have asked for some kind of fee for the license depending on the scope of your commercial application. However ModalDialog control is currently integrated to my AJAX library s@rdalya and s@rdalya is distributed freely under GNU Lesser General Public License. You can use that component, which is identical to (even better than) this one in the article. Being fairly generous, I would very much appreciate a pointer/link to me and my library in your application. Hope that helps. Volkan. .: linkibol - in seek of quality links bullishly :. my blog on coding, humor and creativity .: my trials/errors/studies :. sardalya AJAX Framework Sign In·View Thread·PermaLink Re: Can't use for comercial purposes?? chezchez 18:49 25 Mar '07   Sounds good, thanks. I looked at the Ajax toolkit's Model Popup extender and I think I'll try that first. If that doesn't work - "I'll be Bach" Thanks Jim Sign In·View Thread·PermaLink triggering off of button... interclubs 6:23 13 Feb '07   This is great. Is there anyway to remove the double click portion of it, and have the open window event triggered by a hyperlink? Sign In·View Thread·PermaLink Re: triggering off of button... volkan.ozcelik 8:30 13 Feb '07   Hi, The double-click is just for demo purpose. The HTML source of the example is pretty self-explanatory. You can observe and alter it the way you like. You can attach the event handler to a link's onclick event and this will make the event trigger on clicking the hyperlink. HTH, .: Volkan Ozcelik :. blog .: trials/errors/studies :. sardalya .: orkinos :. Sign In·View Thread·PermaLink Re: triggering off of button... interclubs 16:23 13 Feb '07   Thanks, I got it all working. One last question, is there anyway to allow there to be a form or links in the pop-up window, so that when they are clicked or submitted the content stays in the window? Sign In·View Thread·PermaLink Re: triggering off of button... volkan.ozcelik 19:26 13 Feb '07   You're welcome. You can 1. either use AJAX to HTTP POST data to server without needing a full refresh ( the library in the article (sardalya) also has builtin AJAX functionality see http://sardalya.pbwiki.com/ for details. ) 2. or put and IFRAME into the layer and submit the IFRAME inside. .: Volkan Ozcelik :. blog .: trials/errors/studies :. sardalya .: orkinos :. Sign In·View Thread·PermaLink To be mentioned 18:01 31 Jan '07   The files may not be used for commercial purposes! But in general, scripts are not protected by law. Sign In·View Thread·PermaLink Re: To be mentioned volkan.ozcelik 9:15 2 Feb '07   It depends on the legislation (or country) you're in. I'd be more than happy when my code is used elsewhere. True, scripts are not protected by law. But intellectual property is. Should I not want to protect the script, I wouldn't have published it in the public domain at all. Of course you can steal the code, alter it slightly, rename the variables to your convention if you like and then claim that it's yours. (don't get me wrong I'm not accusing you, my words are general) The disclaimer is there for those who are respectful to others' time, effort and know-how. That's where your judgement, your valuations and hence your conscience comes into play. That may be against the common-sense of some people, and I totally understand and respect that. HTH, .: Volkan Ozcelik :. blog .: trials/errors/studies :. sardalya .: orkinos :. Sign In·View Thread·PermaLink There seems to be a problem with Buttons on the popup Sandeep Adi 7:15 28 Dec '06   Hi, There seems to be a problem when I add buttons on the popup. When I click on the button, it throws a JS error. Could you please help me out with this? - Sandeep Sign In·View Thread·PermaLink Re: There seems to be a problem with Buttons on the popup volkan.ozcelik 11:36 8 Jan '07   Is there a demo URL that we can see? A javascript error may stem from gazillions of reasons including syntax errors, improper dom implementations, missing id's, vendor specific code injection, invalid markup... It is hard to pinpoint the reason without seeing the actual problem. Cheers, Volkan. .: Volkan Ozcelik :. blog .: trials/errors/studies :. sardalya .: orkinos :. Sign In·View Thread·PermaLink Re: There seems to be a problem with Buttons on the popup Sandeep Adi 9:42 9 Jan '07   Unfortunately its an internal application and I cannot share the url, the problem could also be that we use iframes. You had already mentioned that you may not want to use iframes with this one, but I just wanted to give it a try and see if I could tweak it. Thank you very much for the help. Will definitely use this one in the future. Regards, Sandeep - Sandeep Sign In·View Thread·PermaLink 1.00/5 (1 vote) Modal Dialog not staying Modal Komil 5:49 10 Nov '06   Hey, First of all I just want to say ... "GOOD JOB" ... This is a SWEET control. I was looking at the Telerik R.A.D.Window control, but was discouraged with the license fee. I, then, decided to Google my issue and found a bunch of links. This was one of the best links that Google found. I have already implemented this control in one of my projects, and noticed that the window is not staying Modal. Is there a property that I am not setting. I have tested on IE6 & IE7, and got the same results. Thanks for all your hard work. Sign In·View Thread·PermaLink

Last Visit: 11:06 21 Nov '09     Last Update: 11:06 21 Nov '09 123 Next »