Default Popup Control

The Popup Control is used to display overlaping temporary windows that appear separately from an application's main window, and are typically used to display quick reference information. By default, the Popup controls display a header with a Close button and the popup body with the specified content.

<div id="default-popup-control-1" class="popup-target popup-target-sm"></div>
<dx:BootstrapPopupControl runat="server" ShowOnPageLoad="true" PopupElementCssSelector="#default-popup-control-1"
    PopupHorizontalAlign="Center" PopupVerticalAlign="Middle" Width="500px" CloseAction="CloseButton">
    <ContentCollection>
        <dx:ContentControl>
            ...
        </dx:ContentControl>
    </ContentCollection>
</dx:BootstrapPopupControl>

Header and Footer

To specify whether or not to display the Popup Control’s header and footer, use the ShowHeader and ShowFooter properties. To specify the header and footer text, set the HeaderText and FooterText respectively.

<dx:BootstrapPopupControl runat="server" ShowOnPageLoad="true" PopupElementCssSelector="#default-popup-control-2"
    PopupHorizontalAlign="Center" PopupVerticalAlign="Middle" Width="500px" CloseAction="CloseButton" ShowFooter="true" ShowHeader="true"
    HeaderText="Header text" FooterText="Footer text">
    ...
</dx:BootstrapPopupControl>

Dragging

The Popup Control can be dragged within the bounds of the client browser's window. To enable this functionality, set the AllowDragging property to true.

<dx:BootstrapPopupControl runat="server" ShowOnPageLoad="true" PopupElementCssSelector="#default-popup-control-3"
    PopupHorizontalAlign="Center" PopupVerticalAlign="Middle" Width="500px" CloseAction="CloseButton"
    AllowDragging="true">
    ...
</dx:BootstrapPopupControl>

Resizing

The Popup Control supports resizing. To enable this feature, set the AllowResize property to true. A popup window's size limits can be specified via the MinHeight, MinWidth, MaxHeight, and MaxWidth properties.

<dx:BootstrapPopupControl runat="server" ShowOnPageLoad="true" PopupElementCssSelector="#default-popup-control-4"
    PopupHorizontalAlign="Center" PopupVerticalAlign="Middle" Width="500px" CloseAction="CloseButton"
    AllowResize="true">
    ...
</dx:BootstrapPopupControl>

Load Content on Callbacks

The Bootstrap Popup Control has the capability to load the content of popup windows on demand. Several content loading modes are available from the following settings of the LoadContentViaCallback property.

  • None - The content is always (initially) rendered inside popup windows (the default behavior).
  • OnPageLoad - The loading of the popup window content starts immediately after the entire page has loaded.
  • OnFirstShow - The loading of the popup window content starts when a popup window is invoked for the first time.

Using a postponed load of the popup window content, you can enhance the response time of your web page on its initial load.

For demonstration purposes, the callback processing time is intentionally extended in this demo.

<dx:BootstrapPopupControl runat="server" PopupElementCssSelector="#default-popup-control-8"
    PopupHorizontalAlign="Center" PopupVerticalAlign="Middle" Width="500px" Height="160px" CloseAction="CloseButton"
    LoadContentViaCallback="OnFirstShow">
    ...
</dx:BootstrapPopupControl>

Modal Mode

In the modal mode, when the popup window is displayed, the Popup Control prohibits interactions with the parent page. To enable the modal mode, set the Modal property to true.

<dx:BootstrapPopupControl runat="server" PopupElementCssSelector="#default-popup-control-5"
    PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" Width="500px" CloseAction="CloseButton"
    Modal="true">
    ...
</dx:BootstrapPopupControl>

Animation Types

The Popup Control can be displayed and closed with one of two available animations: Fade and Slide. To specify the animation type for these actions, specify the PopupAnimationType and CloseAnimationType properties.

<dx:BootstrapPopupControl runat="server" PopupElementCssSelector="#default-popup-control-6" PopupAnimationType="Fade" CloseAnimationType="Fade">
    ...
</dx:BootstrapPopupControl>
<dx:BootstrapPopupControl runat="server" PopupElementCssSelector="#default-popup-control-7" PopupAnimationType="Slide" CloseAnimationType="Slide">
    ...
</dx:BootstrapPopupControl>

Client-Side Events

This demo illustrates the capabilities of the Popup Control's client events and allows you to specify which client-side events you want to track. Interact with the Popup Control to see the information about all tracked events raised in response to your actions in the event log.

Trace Events:
<dx:BootstrapPopupControl runat="server" ShowOnPageLoad="true" PopupElementCssSelector="#default-popup-control-9"
    PopupHorizontalAlign="Center" PopupVerticalAlign="Middle" Width="500px" CloseAction="CloseButton" >
    <ClientSideEvents
        Init="onInit"
        PopUp="onPopUp"
        CloseUp="onCloseUp" />
    ...
</dx:BootstrapPopupControl>
Screen Size
Color Themes
Demo QR Code