Harshal Shah- Technically Uncomplicating: Simple Custom Dialog box using Jquery

<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>

2 comments:

ShakeelJuly 3, 2012 at 12:20 AM
having problem in the below code

var data = xmlHttp.responseText.split(",");
$("#txtSearch").autocomplete({
source: data
});

if i am using the code this
$("#txtSearch").autocomplete(data);
then there is no problem
AnonymousFebruary 27, 2013 at 4:33 PM
ӏ am eхtгеmely impresѕed wіth
youг ωriting skills as wеll аs with the layout on
yоur blog. Iѕ this a ρaid theme or dіԁ
you mοdify it уourself? Either way keep up
thе еxcellent quality wгiting, іt's rare to see a nice blog like this one today.

Stop by my web blog; best way to lose weight

Monday, May 16, 2011

Simple Custom Dialog box using Jquery

2 comments: