Im ASP.Net AJAX Toolkit findet man ein ModalPopup, das sehr gute Dienste leistet, will man Meldungen etwas eleganter ausgeben als mit einem schlichten alert(). Die Handhabung ist relativ einfach. Man nehme ein beliebiges Serverseitiges Control und weise diesem den ModalPopupExtender zu. Dann gibt man noch mindestens die ID des Controls an, das den Inhalt des Popups repräsentieren soll und fertig. Will man das Popup allerdings client-seitig per Java-Script aufrufen, muss man ein wenig in die Trickkiste greifen. Das Problem dabei ist, dass der ModalPopupExtender immer ein TargetControl braucht. Ich habe dafür einfach ein unsichtbares DIV erzeugt, das mit runat="server" auch auf dem Server sichtbar gemacht wurde. Dann kann man mit $Find('<ID des ModalPopupExtenders>').show() das Popup aufrufen.
Neu war an diesem Beispiel für mich auch der Style filter: alpha(opacity = 70) mit dem man eine Transparenz erzeugen kann.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ValuePlanner_2008.Web.INN_ProjectArea.WebForm1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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 runat="server">
<title>Untitled Page</title>
<style type="text/css">
.modalBackground
{
filter: alpha(opacity = 70);
background-color: #CCCCCC;
}
.ErrorMessage
{
background-color: #800000;
color: #FFFFFF;
}
</style>
</head>
<script language="javascript" type="text/javascript"> 1:
2: function okScript()
3: { 4: alert ("OK-Button wurde gedrückt"); 5: }
</script>
<body>
<form id="form1" runat="server">
<div id="PopupPseudoPanel" style="display: none" runat="server">
</div>
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<cc1:ModalPopupExtender ID="ModalPopupExtender" runat="server" PopupControlID="Panel1"
DynamicServicePath="" Enabled="True" TargetControlID="PopupPseudoPanel" BackgroundCssClass="modalBackground"
OkControlID="OkButton" CancelControlID="CancelButton" OnOkScript="okScript();">
</cc1:ModalPopupExtender>
<br />
<br />
<input id="Button2" type="button" value="button" onclick="$find('ModalPopupExtender').show();" />
<asp:Panel ID="Panel1" runat="server" CssClass="ErrorMessage" style="display:none">
<h1>
Popup</h1>
<p>
Das ist ein Popup!</p>
<center>
<asp:Button ID="OkButton" runat="server" Text="OK"></asp:Button>
<asp:Button ID="CancelButton" runat="server" Text="Cancel"></asp:Button>
</center>
</asp:Panel>
</form>
</body>
</html>