ASPxPopupControl.Modal Property
Gets or sets whether the default popup window is modal.
Namespace: DevExpress.Web
Assembly: DevExpress.Web.v22.1.dll
NuGet Package: DevExpress.Web
Declaration
Property Value
Type | Default | Description |
---|---|---|
Boolean | false |
|
Remarks
A modal popup window retains input focus while open. The user cannot switch windows until the popup window is closed.
Note
When enabling the modal mode, make sure that the ASPxPopupControl.CloseAction property is set properly. It’s necessary to set the ASPxPopupControl.CloseAction property to the CloseAction.CloseButton value, to prevent the popup window from being closed by an outer mouse click (which is a closing action set by default).
Example
This example demonstrates how nested popup windows can be displayed using the ASPxPopupControl.
function KeyHandler(e) {
if (e.keyCode == 27)
if (window2.IsVisible())
window2.Hide();
else if (window1.IsVisible())
window1.Hide();
else
return false;
return true;
}
<head id="Head1" runat="server">
<title>Nested modal windows</title>
</head>
<body id="body" onkeydown="return KeyHandler(event);">
<form id="form1" runat="server">
<dx:ASPxPopupControl ID="window1" runat="server" Modal="true" HeaderText="First Window"
PopupElementID="body" ClientInstanceName="window1" CloseAction="CloseButton" PopupAction="None"
PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" AllowDragging="True">
<ContentCollection>
<dx:PopupControlContentControl runat="server">
<dx:ASPxButtonEdit ID="ASPxButtonEdit1" runat="server"
Text="Click Ellipsis Button to open Second Modal Window">
<Buttons>
<dx:EditButton></dx:EditButton>
</Buttons>
<ClientSideEvents ButtonClick="function(s, e) {
window2.Show();
}" />
</dx:ASPxButtonEdit>
</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxPopupControl><dx:ASPxPopupControl ID="window2" runat="server" Modal="true"
HeaderText="Second Window" PopupElementID="ASPxButtonEdit1"
ClientInstanceName="window2"
CloseAction="CloseButton" PopupAction="None" PopupHorizontalAlign="WindowCenter"
PopupVerticalAlign="WindowCenter" AllowDragging="True">
<ContentCollection>
<dx:PopupControlContentControl>
<dx:ASPxDateEdit ID="ASPxDateEdit1" runat="server">
</dx:ASPxDateEdit>
<dx:ASPxButton ID="ASPxButton2" runat="server" AutoPostBack="False"
Text="Close" >
<ClientSideEvents Click="function(s, e) {
window2.Hide();
}" />
</dx:ASPxButton>
</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxPopupControl>
<br/>
<dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False"
Text="Open First Window">
<ClientSideEvents Click="function(s, e) {
window1.Show();
}" />
</dx:ASPxButton>
</form>
</body>
Related GitHub Examples
The following code snippet (auto-collected from DevExpress Examples) contains a reference to the Modal property.
Note
The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.