Skip to main content
Tab

ASPxPopupControl.Modal Property

Gets or sets whether the default popup window is modal.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v22.1.dll

Declaration

[DefaultValue(false)]
public bool Modal { get; set; }

Property Value

Type Default Description
Boolean false

true if the default popup window is modal; otherwise, 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>
See Also