Wednesday, March 21, 2012

ModalPopup - how to prevent interaction with page?

In the example onhttp://ajax.asp.net/ajaxtoolkit/ModalPopup/ModalPopup.aspx the ModalPopup prevents interaction with the page. If I copy and paste that code, the panel shows but I still can interact with the page, respectively the control elements in the back. What do I need to apply to make this work like in the example? How do I block the interaction (except with the newly opened panel)Any hint highly appreciated.

<asp:ScriptManagerid="ScriptManager1"runat="server"></asp:ScriptManager><asp:UpdatePanelid="UpdatePanel1"runat="server"><contenttemplate>

<

ajaxToolkit:ModalPopupExtenderid="ModalPopupExtender1"runat="server"CancelControlID="ButtonCancel"OnOkScript="onOk()"OkControlID="ButtonOK"DropShadow="true"PopupControlID="PanelRentals"TargetControlID="ButtonGo"BackgroundCssClass="modalBackground"> ></ajaxToolkit:ModalPopupExtender><asp:Panelid="PanelRentals"runat="server"Height="50px"Width="125px"BorderStyle="Solid"><asp:Labelid="Label1"runat="server"Text="Rentals"></asp:Label> <asp:Buttonid="ButtonCancel"runat="server"Text="Cancel"></asp:Button><asp:Buttonid="ButtonOk"runat="server"Text="OK"></asp:Button></asp:Panel><asp:Buttonid="ButtonGo"runat="server"Text="Button"></asp:Button>

</

contenttemplate></asp:UpdatePanel>

You need to define a CSS class for the BackgroundCssClass property (named "modalBackground" in the snippet above). SampleWebSite does this in StyleSheet.css as:

.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}

No comments:

Post a Comment