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