Sign In| Join
Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
All-Star
31269 Points
3445 Posts
Jun 20, 2007 03:48 AM|LINK
Here is the test code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var styleToSelect; function onOk() { document.getElementById('Paragraph1').className = styleToSelect; } </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <br /> <asp:LinkButton ID="LinkButton1" runat="server">Please click to select an alternate text style.</asp:LinkButton><br /> <br /> <div> <p id="Paragraph1"> <a href="http://joeon.net"><span style="color: #3366cc">Joe Stagner</span></a>, a member of the Microsoft product team, builds a CascadingDropDown sample application that demonstrates two fundamental benefits of AJAX-enabled web applications, namely web service integration and asynchronous page updates. </p> <asp:Panel ID="PanelContainer" runat="server" CssClass="modalPopup" Height="120" Style="display: none" Width="233px"> <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Width="220px" Height="50" ScrollBars="Auto"> <p> Choose the style you would like:</p> <input id="RadioA" name="Radio" onclick="styleToSelect = 'sampleStyleA';" type="radio" /> <label class="sampleStyleA" for="RadioA"> Choose THIS Style.</label><br /> <input id="RadioB" name="Radio" onclick="styleToSelect = 'sampleStyleB';" type="radio" /> <label class="sampleStyleB" for="RadioB"> Choose THIS Style.</label><br /> <input id="RadioC" name="Radio" onclick="styleToSelect = 'sampleStyleC';" type="radio" /> <label class="sampleStyleC" for="RadioC"> Choose THIS Style.</label><br /> <input id="RadioD" name="Radio" onclick="styleToSelect = 'sampleStyleD';" type="radio" /> <label class="sampleStyleD" for="RadioD"> Choose THIS Style.</label><br /> <br /> <div align="center"> <asp:Button ID="OkButton" runat="server" Text="OK" /> <asp:Button ID="CancelButton" runat="server" Text="Cancel" /> </div> </asp:Panel> </asp:Panel> <br /> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="LinkButton1" PopupControlID="PanelContainer" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="OkButton" OnOkScript="onOk()" CancelControlID="CancelButton" /> </div> </form> </body> </html>
CSS Code:
.watermark { background: #FFAAFF; } .popupControl { background-color:#AAD4FF; position:absolute; visibility:hidden; border-style:solid; border-color: Black; border-width: 2px; } .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPopup { background-color:#ffffdd; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:250px; } .sampleStyleA { background-color:#FFF; } .sampleStyleB { background-color:#FFF; font-family:monospace; font-size:10pt; font-weight:bold; } .sampleStyleC { background-color:#ddffdd; font-family:sans-serif; font-size:10pt; font-style:italic; } .sampleStyleD { background-color:Blue; color:White; font-family:Arial; font-size:10pt; } Hope it helps! If I misunderstood you, please let me know. Thanks
.watermark { background: #FFAAFF; } .popupControl { background-color:#AAD4FF; position:absolute; visibility:hidden; border-style:solid; border-color: Black; border-width: 2px; } .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPopup { background-color:#ffffdd; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:250px; } .sampleStyleA { background-color:#FFF; } .sampleStyleB { background-color:#FFF; font-family:monospace; font-size:10pt; font-weight:bold; } .sampleStyleC { background-color:#ddffdd; font-family:sans-serif; font-size:10pt; font-style:italic; } .sampleStyleD { background-color:Blue; color:White; font-family:Arial; font-size:10pt; }
Jonathan She...
All-Star
31269 Points
3445 Posts
Re: modal popup
Jun 20, 2007 03:48 AM|LINK
Here is the test code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var styleToSelect; function onOk() { document.getElementById('Paragraph1').className = styleToSelect; } </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <br /> <asp:LinkButton ID="LinkButton1" runat="server">Please click to select an alternate text style.</asp:LinkButton><br /> <br /> <div> <p id="Paragraph1"> <a href="http://joeon.net"><span style="color: #3366cc">Joe Stagner</span></a>, a member of the Microsoft product team, builds a CascadingDropDown sample application that demonstrates two fundamental benefits of AJAX-enabled web applications, namely web service integration and asynchronous page updates. </p> <asp:Panel ID="PanelContainer" runat="server" CssClass="modalPopup" Height="120" Style="display: none" Width="233px"> <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Width="220px" Height="50" ScrollBars="Auto"> <p> Choose the style you would like:</p> <input id="RadioA" name="Radio" onclick="styleToSelect = 'sampleStyleA';" type="radio" /> <label class="sampleStyleA" for="RadioA"> Choose THIS Style.</label><br /> <input id="RadioB" name="Radio" onclick="styleToSelect = 'sampleStyleB';" type="radio" /> <label class="sampleStyleB" for="RadioB"> Choose THIS Style.</label><br /> <input id="RadioC" name="Radio" onclick="styleToSelect = 'sampleStyleC';" type="radio" /> <label class="sampleStyleC" for="RadioC"> Choose THIS Style.</label><br /> <input id="RadioD" name="Radio" onclick="styleToSelect = 'sampleStyleD';" type="radio" /> <label class="sampleStyleD" for="RadioD"> Choose THIS Style.</label><br /> <br /> <div align="center"> <asp:Button ID="OkButton" runat="server" Text="OK" /> <asp:Button ID="CancelButton" runat="server" Text="Cancel" /> </div> </asp:Panel> </asp:Panel> <br /> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="LinkButton1" PopupControlID="PanelContainer" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="OkButton" OnOkScript="onOk()" CancelControlID="CancelButton" /> </div> </form> </body> </html>If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework