Jquery UI: Add a Shadow Line Around a Dialog Box

I really like the style of Facebook (or LinkedIn) Javascript popup dialogs – a thin semi-transparent shadow line around the dialog. It looks nice and from the usability point of view it has a purpose, as it is attracts user’s attention to the important component on the screen.

There are many examples of custom Javascript dialogs on the Internet that explain how to achieve this. While many solutions are really good, I wanted to make use of the dialog provided by jQuery UI library by default.

I have came up with a solution that works, but I don’t think it is the most elegant way to do it (CSS is not my strong side). The solution is quite simple, and pretty straight forward (I think :) ). The following are the final results as tested in FF3, IE8, Opera 10 and Chrome 10, please note the shadow line around the dialog:

Firefox - jQuery dialog box with semi-transparent shadow around it

Firefox 3.6.16

Internet Explorer - jQuery dialog box with semi-transparent shadow around it

Internet Explorer 8.0.76

opera-10.63

opera-10.63

chrome-10.0.648

First I defined a CSS class that’s going to have properties for the background shadow (the bg_dialog_modeless_mask.png is an 8×8 gray square image)

.dialog-mask {
 -moz-border-radius:5px 5px 5px 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 background:url("../images/bg_dialog_modeless_mask.png") repeat scroll left top transparent;
}

Somewhere on my HTML page, I defined a DIV that’s going to be the dialog holder:

<div id="popup-holder"></div>

I added jQuery dialog init statement in my global JS file:

$(document).ready(function(){

 $( '#popup-holder' ).dialog({
       autoOpen: false,
       height: 350,
       width: 530,
       modal: true,
       resizable: true,
       draggable: false,
       buttons: {
         Cancel: function() {
            $( this ).dialog( "close" );
            $( '#dialog-wrapper' ).remove();
         }
      },
      close: function() {
            $( '#dialog-wrapper' ).remove();
      },
      open: function() {
            wrapJqueryDialog($( this ));
      },
      resize: function() {
            wrapJqueryDialog($( this ));
      }
   });
});

The #dialog-wrapper is the ID of the DIV that holds the semi-transparent shadow which wraps the dialog. The wrapJqueryDialog function creates the shadow when dialog is opened, and handles the shadow resize when dialog is resized (it is also possible to add an event to drag the shadow when dialog has draggable option set to true).

Now the important part, the wrapJqueryDialog function:

function wrapJqueryDialog(dialogWidgetObj)  {
	//The width and height of the shadow line wrapping the dialog
        var shadowWidth = 20;

        //Lets remove the shadow holder to start clean
	$( '#dialog-wrapper' ).remove();

        //Gets the current dialog widget
	var widget = dialogWidgetObj.dialog( "widget" );

        //Create the shadow holder DIV that has the background shadow CSS class
	var dialogwrapper = $('<div id="dialog-wrapper" class="dialog-mask" />');

	//For IE, the holder must be appended to the body first before any manipulation.
	$('body').append(dialogwrapper);

        //Lets copy default inline styles from the dialog widget to the shadow holder
	dialogwrapper.attr("style", widget.attr("style"));

        //Lets position the shadow holder before and above the dialog widget
	dialogwrapper.css("top", parseInt(dialogwrapper.css("top")) - shadowWidth);
	dialogwrapper.css("left", parseInt(dialogwrapper.css("left")) - shadowWidth);

        dialogwrapper.css("position", "absolute");

	//Make sure that the dialog widget is infront of surrounding shadow box and overlay (if there is one set)
	widget.css("z-index", (parseInt(widget.css("z-index")) + 1));

	//Add to the shadow width default padding value from the class '.ui-dialog' and
	//default border width from the class '.ui-widget-content' (1px times two)
	var finalShadowWidth = shadowWidth + parseInt(widget.css("padding-top")) + 2;

	var widgetHeight = parseInt(widget.css("height"));
        //Lets extend the shadow holder height
	dialogwrapper.css("height", widgetHeight + (finalShadowWidth * 2));

	var widgetWidth = parseInt(widget.css("width"));
	//Lets extend the shadow holder width
        dialogwrapper.css("width", widgetWidth + (finalShadowWidth * 2));
}

That’s all when it comes to code (don’t forget to add to your HTML/JS code a dialog trigger, it can be a link or a button). I am really interested to hear your comments about it and suggestions. If you can suggest a better way of implementation – please do so, I am really keen to know :)

CSS Modal Dialog With Semi Transparent Border

Few days ago I was working on UI for one of my projects. I needed to create a pop up dialog with semi opaque background around it, something like Facebook has.  Since my CSS skills are not too powerful, I turned to Google to look for a tutorial(s).

Many resources that I have found, make use of images when creating semi transparent background around dialogs. I did not want to do that, I wanted to make use of pure CSS. It did take me quite a few hours to find what I wanted to do.

Finally, after reading a number of tutorials on the Internet, I have came up with a solution that did what I wanted.

The following is a screen shot of my pop-up using Firefox:

Firefox  - dialog with semi opaque background using pure CSS

Firefox - dialog with semi opaque background using pure CSS

The following is a screen shot of my pop-up using Internet Explorer:

Internet Explorer - dialog with semi opaque background using pure CSS

Internet Explorer - dialog with semi opaque background using pure CSS

The following is a code snippet from a test page that I did. Its an example of HTML structure of DIVs that create the popup. The CSS styles are located in the head section of the test page. jQuery is also included (it adds some minor effects, plus its centers the popup in the middle of the screen). Its pretty straight forward, so just download, unzip and run it. I have tested the popup in Firefox, IE6,IE7, Safari (Win) and Google Chrome, so I can say it works fine in all major browsers.

<div id="dialog-box-parent-container">
	<div id="dialog-box-transparent-background" class="opacity-70 box-round-all-8px"></div>
	<div id="dialog-box-header" class="box-round-top-4px">
		<h2 class="box-round-top-4px">
			<span class="dialog-box-header-content">Action Completed</span>
		</h2>
	</div>
	<div id="dialog-box-content" class="box-round-bottom-4px">
		<div id="dialog-box-text">blah blah blah</div>
		<div class="dialog-box-buttonpane">
			<a class="dialog-box-button">Okay</a>
		</div>
	</div>
</div>

I hope this example provides you enough information how to create modal popup dialog using pure CSS. The source code is attached: jquery modal dialog with semi-opaque border

Please let me know if you have any questions,

Cheers