Sunday 9 December 2012

Popup in jquery

The following  show how to display popup in jquery.

CSS:-
 <style type="text/css">

        #Container
        {
            position: fixed;
            left: 0px;
            top: 0px;
            z-index: 4;
            opacity: 0.4;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* first!*/
            filter: alpha(opacity=40); /* second!*/
            background-color: gray;
            display: none;
            width: 100%;
            height: 100%;
        }
    </style>

Script:

<script type="text/javascript" language="javascript">
          function ShowPopup() {
              $('#Container').show();
              $('#popup').show();
          }
          function HidePopup() {
              $('#Container').hide();
              $('#popup').hide();
          }
          $(".btnClose").live('click', function () {
              HidePopup();
          });
          $(".btnAdd").live('click', function () {
              HidePopup();
          });
</script>

.aspx Code :-
<div id="Container">
         <!--Display List-->
       
    </div>
<div id="popup" style="background-color:White; height:175px; width:300px; z-index:111; position:absolute; display:none; left:35%; top:20%;">
            <table width="100%" style="width: 100%; height: 100%;" cellpadding="0" cellspacing="5">

                <tr style="background-color: #0924BC; position:fixed; height:15px; ">
                    <td colspan="2" style="color:White; font-weight: bold; font-size: 1.2em; padding:3px"
                        align="center">
                        Edit State <%--<a id="closebtn" style="color: white; position:fixed; float: right; text-decoration:none" class="btnClose"  href="#">X</a>--%>
                    </td>
                </tr>
                <tr>
                    <td align="right" style="width: 45%">
                        State ID:
                    </td>
                    <td>
                        <input type="text" id="txtStateId" />
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        State Name:
                    </td>
                    <td>
                        <input type="text" id="txtState" />
                    </td>
                </tr>
                <tr>
                    <tr><td></td><td><input type="button" value="Add" class="btnAdd" onclick="ADD()" /><input type="button" value="Close" name="closebtn" id="closebtn" class="btnClose" /></td></tr>
                </tr>
            </table>
        </div>

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home