<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="Js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Js/ModalPopups.js" type="text/javascript"></script>
<script language="javascript">
//Set Click Event of Button
$(document).ready(function() {
var _btnNo = document.getElementById('<%= btn.ClientID %>');
$(_btnNo).click(function() {
ModalConfirmPopup('hello');
return false;
});
});
//Modal PopUp Show
function ModalConfirmPopup(msg) {
var divAlertMsg = document.getElementById('<%= divPopupMsg.ClientID %>');
var divPopupTitle = document.getElementById('<%= divPopupTitle.ClientID %>');
divAlertMsg.innerHTML = msg;
divPopupTitle.innerHTML = 'confirm Box';
$find('popupPO').show();
}
</script>
<style>
<%--CSS--%>
.modalBackground
{
filter: alpha(opacity=40);
opacity: 0.4;
background-color: Gray;
}
.modalPopup
{
background-color: #AEBC21;
border-width: 3px;
border-style: solid;
border-color: Gray;
padding: 3px;
position: absolute;
visibility: hidden;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<%-- Set Button--%>
<asp:Button ID="btn" runat="server" Text="Show popUp" />
</div>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:LinkButton ID="lnkPOPopup" runat="server"></asp:LinkButton>
<ajaxToolkit:ModalPopupExtender ID="ModalPOPopup" runat="server" BehaviorID="popupPO"
TargetControlID="lnkPOPopup" PopupControlID="pnlPOPopup" OkControlID="btnNo"
BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlPOPopup" runat="server" Style="display: none; width: 40%; font-size: 8pt;">
<div id="divPopupTitle" runat="server">
</div>
<table width="100%">
<tr>
<td>
<div id="divPopupMsg" runat="server">
</div>
</td>
</tr>
<tr>
<td style="height: 7px;">
</td>
</tr>
<tr>
<td align="center">
<span class="art-button-wrapper"><span class="l"></span><span class="r"></span>
<asp:Button ID="btnConfirm" runat="server" Text="Yes" CssClass="art-button" OnClientClick="javascript:return ModalConfirmPopup('Hello');" />
</span><span class="art-button-wrapper"><span class="l"></span><span class="r"></span>
<asp:Button ID="btnNo" runat="server" Text="No" CssClass="art-button" />
</span>
</td>
</tr>
</table>
<div class="cleared">
</div>
</asp:Panel>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
Notes--..
Download JQuey For 1. ModalPopups.js 2. jquery-1.4.2.min.js
No comments:
Post a Comment