Tuesday, 23 October 2012

Jquery Pop up

<style type="text/css">
/* popup_box DIV-Styles*/
#popup_box {
    display:none; /* Hide the DIV */
    position:fixed; 
    _position:absolute; /* hack for internet explorer 6 */ 
    height:150px; 
    width:500px; 
    background:#FFFFFF; 
    left: 400px;
    top: 150px;
    z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
    margin-left: 15px; 
   
    /* additional features, can be omitted */
    border:2px solid #ff0000;     
    padding:15px; 
    font-size:15px; 
    -moz-box-shadow: 0 0 5px #ff0000;
    -webkit-box-shadow: 0 0 5px #ff0000;
    box-shadow: 0 0 5px #ff0000;
   
}

#container {
    background: #d2d2d2; /*Sample*/
    width:100%;
    height:100%;
}

a{ 
cursor: pointer; 
text-decoration:none; 
}

/* This is for the positioning of the Close Link */
#popupBoxClose {
    font-size:20px; 
    line-height:15px; 
    right:5px; 
    top:5px; 
    position:absolute; 
    color:#6fa5e2; 
    font-weight:500;     
}
</style>



<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function() {

        // When site loaded, load the Popupbox First
        $('#a_CancelPayment').click(function() {
            loadPopupBox();
        });

        $('#popupBoxClose').click(function() {
            unloadPopupBox();
        });



        function unloadPopupBox() {    // TO Unload the Popupbox
            $('#popup_box').fadeOut("slow");
            $("#wrapper").css({ // this is just for style       
                "opacity": "1"
            });
        }

        function loadPopupBox() {    // To Load the Popupbox
            $('#popup_box').fadeIn("slow");
            $("#wrapper").css({ // this is just for style
                "opacity": "0.3"
            });
        }
        /**********************************************************/

    });
</script>


Put the below code in form tag in your body....
  <div id="popup_box">    <!-- OUR PopupBox DIV-->
    <table style="width :100%;">
 
    <tr ><td style="width :15%;"></td>
    <td align="center" style="width :70%;">
    <table>
    <tr style="height:100px;">
    <td align="center">Do you really want to cancel your recurring payments?</td>
    </tr>
    <tr><td align="center"><asp:Button ID="btn_ConfirmCancelPayment" runat="server" Text ="Confirm" OnClick ="btn_ConfirmCancelPayment_Click" />
    <asp:Button ID="btn_CancelPayment" runat="server" Text ="Cancel" OnClick ="btn_CancelPayment_Click"/></td></tr>
    <tr></tr>
    </table>
   
   
    </td><td style="width :15%;"></td>
    </tr>
    </table>
   
    <a id="popupBoxClose">Close</a>   
</div>

No comments:

Post a Comment