Jquery:Popup-1

Jquery Reference:

       jquery-1.4.2.min.js
       jquery.helper.js

CSS:

/* Panel styles start */
.popup
{
    font-family: arial,helvetica,clean,sans-serif;
    font-size: small;
    padding: 2px 3px;
    display: block;
    position: absolute;
    z-index:1;
}

.container
{
    border: solid 1px #808080;
    border-width: 1px 0px;
}

.header
{
    background:url(images/top-bg.gif) repeat-y;
    border-color: #808080 #808080 #ccc;
    border-style: solid;
    border-width: 0px 1px 1px;
    padding: 3px 10px;
    text-align:left;
}

.popup .header .msg
{
    font-weight: bold;
}        

.popup .body
{
    background-color: #f2f2f2;
    border-color: #808080;
    border-style: solid;
    border-width: 0px 1px;
    padding: 10px;
}

.popup .body .msg
{
    font-family: arial,helvetica,clean,sans-serif;
    font-size:small;
   
    background: url(sprite.png) no-repeat 0px -1150px;     
    float: left;
    padding-left: 22px;
   /* */
} 
.popup .footer
{
    background: url(sprite.png) repeat-x 0px -200px; 
   

    text-align:right;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 8px;
}

.popup .close
{
    right: 7px;  
    background: url(sprite.png) no-repeat 0px -300px;
    width: 25px; 
    cursor: pointer;   
    position: absolute;
    top: 7px;    
    height: 15px;
}

.button_popup
{
    cursor: pointer;
    border-width:1px;
    background-color:#f2f2f2;
    border-color:#808080;
}


.bodybox {
    background:#FFF!important;
    padding:10px;
   
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    behavior: url(border-radius.htc);
   
    -moz-box-shadow: 0 0 5px #000; /* Firefox */
     -webkit-box-shadow: 0 0 5px #000; /* Safari, Chrome */
     box-shadow: 0 0 5px #000; /* CSS3 */
      behavior: url(ie-css3.htc);
      width:96%;
      margin-left:auto;
      margin-right:auto;
}
/* Panel styles end */





HTML Code For Popup Div:

     <div id="divSimplePopup" class="popup" style="display: none; width: 540px; top: 278px;

            left: 151px; height: 334px;">

            <div class="container">

                <div class="bodybox">

                    <div id="g"  style="height: 289px; overflow: auto;" class="footer">

                        <div class="header" style="background-color: #003399">

                            <span id="lblPopupHeader" class="msg" style="color: #FFFFFF; font-family: Arial, Helvetica, sans-serif">

</span>

                        </div>

                        <div id="detaildata" style="overflow: auto;height: 239px">

                        </div>

                    </div>

                    <div class="footer">

                        <input class="button" id="btnCancel" onclick="$('#divSimplePopup').hideModal(); return false;"

                            type="submit" value="Cancel" />

                    </div>

                    

                </div>

            </div>

        </div>

HTML Button for popup:

<input value="popup" onclick="divpopup();return false;" type="submit">

javascript Function: 

       function divpopup()  {
        $('#divSimplePopup').showModal();           

       }