Harshal Shah- Technically Uncomplicating: May 16, 2011

<html>
<head>
import the jquery plugins from the jquery website like
jquery.js
jquery.ui.core.min.js etc..there will be two part one will be the core and one for the ui.
Also include the css files that come along with the zip file which you download from the jquery website
<script type="text/javascript">

    var divContents = "<h1>";
        divContents +="<a href=\"www.google.com\">";
        divContents +="Google";
        divContents +="</a>";
        divContents +="</h1>";
        divContents +="<h1>";
        divContents +="<a href=\"www.yahoo.com\">";
        divContents +="Yahoo";
        divContents +="</a>";
        divContents +="</h1>";


       var resumeortrackclaimdiv = jQuery('<div id="resumeortrackclaim"></div>')
         .html(divContents)
         .dialog({
             autoOpen: false,
             modal:true,
             draggable: true,
             resizable: false,
             height: 120,
             width: 270,
             position: ['center'],
                 overlay: { opacity: 0, background: 'black'},
                 open: function(){jQuery(".ui-dialog-titlebar-close").focus();}
         });
    jQuery('#ui-dialog-title-resumeortrackclaim').append("<span>Resume Or Track Claim</span>")

     jQuery('#my-claim-button').click(function() {
         resumeortrackclaimdiv.dialog('open');
         return false;
         });

/* this will create a a div and dialog box
    But the style sheet will be default since we want a custom dialog box we need to modify the css file for the dialog box.
*/

/* Now change the css content to create a default dialog box*/

.ui-dialog .ui-dialog-titlebar {
    padding: 0px;
    position: none;
}

.ui-widget-header {
    background: none;
    border: 0px ;
}

#resumeortrackclaim {
    height: 100px !important;
    width: 250px !important;
}

.ui-dialog-titlebar {
    height :20px;
    widht:300px;
    background-color:black;
    padding:4px;
}

.ui-dialog .ui-dialog-content {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    overflow: auto;
    padding: 0 !important;
    position: relative;
}

.ui-dialog-content {
    margin-top:15px;
    margin-left: 7px;
    }

.ui-dialog .ui-dialog-titlebar {
    padding: 0.5em 2px 0.3em !important;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
}

.ui-dialog-titlebar-close {
    background-image: url("../images/close.png") !important;
    border:0 none;
    padding: 0px !important;
    height: 18px !imporant;
    width: 18px !important;
    }

.ui-icon .ui-widget-content .ui-widget-header {
    background-image: url("../images/close.png") !important;
    height: 18px !imporant;
    width: 18px !important;
    }

.ui-widget-overlay {
    background: black;
    opacity: 0.7 !important;
    filter: alpha(opacity = 50);
    position: absolute;
    top: 0;
    left: 0;
}

.ui-icon {
    background-image: url("../images/close.png") !important;
    height: 18px !imporant;
    width: 18px !important;
}

.ui-widget-content .ui-icon {
     background-image: url("../images/close.png") !important;
}

.ui-widget-header .ui-icon {
     background-image: url("../images/close.png") !important;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    background: url("../images/close.png") repeat-x !important;
    border: none !important;
    height: 18px !imporant;
    width: 18px !important;
    color: #212121;
    font-weight: normal;
}

.ui-state-hover {
    background-color: black transparent !important;
    }

.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus {
    background-color: black transparent !important;
}

</script>
</head>

<body>
</body>
</html>

You can also create the div in body and initially hide that div and display it on click
Here #resumeortrackclaim will be placed in the body

/* jQuery('#resumeortrackclaim').hide();

    jQuery('#resumeortrackclaim').dialog({
        autoOpen: false,
        modal:true,
        draggable: true,
        resizable: false,
        height: 120,
        width: 270,
        position: ['center'],
            overlay: { opacity: 0, background: 'black'},
            open: function(){jQuery(".ui-dialog-titlebar-close").focus();}
    });

    jQuery('#my-claim-button').click(function() {
        jQuery('#resumeortrackclaim').dialog('open');
        return false;
    });
*/

Place the below div in body

<div id="resumeortrackclaim">
<div style="display: block; position: absolute;   overflow: hidden; z-index: 1002; outline: 0pt none; " class="ui-dialog ui-draggable" tabindex="-1">
<div class="ui-dialog-container" style="position: relative; width: 100%; height: 100%;"><div class="ui-dialog-titlebar" unselectable="on" style="-moz-user-select: none;">
    <span class="ui-dialog-title" unselectable="on" style="-moz-user-select: none;">Resume Or Track Claim
       </span>
   <a class="ui-dialog-titlebar-close" href="#" unselectable="on" style="-moz-user-select: none;">
    </a>
</div>
<div title="Resume Or Track Claim" id="dialog-modal" class="ui-dialog-content" style="width: 270px;" >
<h1>
    <a href="https://process.phoneclaim.com/ATT/Default.aspx?clientID=313&UserAction=CompleteExisting&Culture=en-US&Mode=LIVE">Resume Claim
    </a>
</h1>
<h1>
<a href="https://process.phoneclaim.com/ATT/Default.aspx?clientID=313&UserAction=TrackStatus&Culture=en-US&Mode=LIVE">
     Track Claim
   </a>
</h1>
</div>
</div>
</div>

     <div class="ui-dialog-buttonpane" style="position: absolute; bottom: 0pt; display: none;">
     </div>
</div>

Harshal Shah- Technically Uncomplicating

Monday, May 16, 2011

Simple Custom Dialog box using Jquery