<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="TestHideModalByClickBackground.aspx.cs"
Inherits="SoluTest_ModalOutsideUDP.TestHideModalByClickBackground"
%>
<%@ Register
Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="AjaxToolKit"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
function pageLoad() {
var mpe = $find("MPE");
mpe.add_shown(onShown);
}
function onShown() {
var background = $find("MPE")._backgroundElement;
background.onclick = function () {
$find("MPE").hide(); }
}
</script>
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
-moz-opacity: 0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server"
/>
<asp:Button ID="btnShowPopup"
runat="server"
Text="Open"
/>
<AjaxToolKit:ModalPopupExtender
ID="mdlPopup"
BehaviorID="MPE"
runat="server"
TargetControlID="btnShowPopup"
PopupControlID="pnlPopup"
CancelControlID="btnClose"
BackgroundCssClass="modalBackground"
/>
<asp:Panel ID="pnlPopup"
runat="server"
BackColor="Yellow"
Width="500px"
Height="200px"
Style="display: none;">
<asp:LinkButton ID="btnClose"
runat="server"
Text="Close"
CausesValidation="false"
/>
</asp:Panel>
</div>
</form>
</body>
</html>
No comments:
Post a Comment