Creating professional looking HTML dialog using CSS & jquery UI

The objective is to create a floating dialog box which is similar to Application dialog.

Final dialog that is created.

The HTML part

The html consists of basic structure needed for the dialog.

<div id="propertyWindow" class="Draggable_Item PTtlContainer hiddenClass">
<div class="containerBoxLeft">
    <div class="containerBoxRight">
        <div class="containerBox">
            <img src="images/cross.png" ALIGN="RIGHT" class="imgPClose" alt="Close" title="Close" />
            <span class="lblHeading" id="propertyWindowTtl">Properties</span>
        </div>
    </div>
</div>
<div class="containerBoxLeft_Mid NON_Draggable_Item">
    <div class="containerBoxRight_Mid">
        <div class="containerBox_Mid">
            <div id="propertyContainer">
            <!-- content -->
            </div>
        </div>
    </div>
</div>
<div class="containerBoxLeft_Bot NON_Draggable_Item">
    <div class="containerBoxRight_Bot">
        <div class="containerBox_Bot">
        </div>
    </div>
</div>
</div>

The Dialog is contained in a div element called  propertyWindow 

The div with id propertyWindow is the container for dialog and propertyWindowTtl can be edited for the title of the Dialog.
propertyContainer is the place where we can add the contents of the dialog.

The CSS part

.containerBox
{
    background: url('../images/Dialog_Top.png') repeat-x left top;
    color: White;
    padding: 7px 5px;
    font-family: Arial;
    font-size: 14px;
    margin-left: 8px;
    margin-right: 11px;
    height: 31px;
}

.containerBoxLeft
{
    background: url(../images/Dialog_TopLeft.png) no-repeat top left;
    height: 31px;
}

.containerBoxRight
{
    background: url(../images/Dialog_TopRight.png) no-repeat top right;
    height: 31px;
}

.containerBox_Bot
{
    background: url('../images/Dialog_Bot.png') repeat-x left top;
    color: White;
    padding: 7px 5px;
    font-family: Arial;
    font-size: 14px;
    margin-left: 8px;
    margin-right: 11px;
}

.containerBoxLeft_Bot
{
    background: url(../images/Dialog_BotLeft.png) no-repeat top left;
    height: 14px;
}

.containerBoxRight_Bot
{
    background: url(../images/Dialog_BotRight.png) no-repeat top right;
    height: 14px;
}

.containerBox_Mid
{
    background: url('../images/Dialog_Mid.png') repeat left top;
    color: Black; /*padding: 7px 5px;*/
    font-family: Arial;
    font-size: 14px;
    margin-left: 1px; /*margin-right: 11px;*/
    margin-right: 3px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.containerBoxLeft_Mid
{
    background: url(../images/Dialog_MidLeft.png) repeat-y top left;
}

.containerBoxRight_Mid
{
    background: url(../images/Dialog_MidRight.png) repeat-y top right;
}

#propertyWindow
{
    width:350px;
    position:absolute;
    top:50px;
    z-index:5001;
}

#propertyContainer
{
    height:450px;
}

The Images used in the css are given below.

JQuery UI Part

JQuery UI is used for the drag and drop and Close button click.
When the document is loaded this functionality is wired up.
I usually create javascript in a separate file called main. js in js folder. 

$(document).ready(function() {
    $('.Draggable_Item').draggable({cancel:".NON_Draggable_Item"});
    $('.imgClose').click(function() {$(this).parents('.PTtlContainer').toggle('blind');});

});

And add the script reference in the html

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
        <script>jQuery.ui || document.write('<script src="js/vendor/jquery-ui-1.10.2.custom.min.js"><\/script>')</script>
        <script src="js/main.js"></script>

You can invoke the Dialog using jquery code given below. This is also added in 

$(document).ready

$( "#bnProperty").button().click(function() {$('.PTtlContainer').toggle('clip');});

Where bnProperty is an id of a button given in the html tag

<button id="bnProperty" >Property</button>

Conclusion

With the help of css and Jquery UI it is possible to create custom dialogs.
By changing the Images we can get a different title colored dialog.
_ Find Me on Google+