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:
<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>
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;
border-bottom: 1px #00449E outset;
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:
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.
First of all, we need to prepare the modal dialog at page load:
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:
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 (
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:
var opacityCSS = document.createElement("link");
And the height adjustment:
var dynModalBG=new DynamicLayer("ModalBG");
Then we create the modal dialog in just a single line:
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:
Now let us have a look at the
var ajax = _.ajax();
g_Modal.show("Fetching data... Please wait...");
The comments should be self-explanatory.
And finally, the two methods that are triggered after the server's post back:
g_Modal.show("Error code: ["+ intStatus+ "] error message: [" +
strStatusText + "].");
What About those Nasty SELECTs ?
ModalDialog object internally handles it, by replacing them with
SPAN elements with the class "
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
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
Here follows the code:
var arSelect = document.getElementsByTagName("select");
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.