Default Popup

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 the Close button and the popup body with the specified content. To add content to a popup window, use the ContentCollection.ContentControl property in markup or BootstrapPopupControl.Controls.Add in code behind.

The Popup Control's advanced features such as resizing, dragging, and absolute positioning require the content container to have a fixed size. This means the container cannot have a responsive layout (its size is not based on the screen resolution).

Use the following client-side events to handle popup resizing:

ASPXCopy 
<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>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</p>
        </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.

ASPXCopy 
<div id="default-popup-control-2" class="popup-target"></div>
<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">
    <ContentCollection>
        <dx:ContentControl>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</p>
        </dx:ContentControl>
    </ContentCollection>
</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.

ASPXCopy 
<div id="default-popup-control-3" class="popup-target popup-target-sm"></div>
<dx:BootstrapPopupControl runat="server" ShowOnPageLoad="true" PopupElementCssSelector="#default-popup-control-3"
    PopupHorizontalAlign="Center" PopupVerticalAlign="Middle" Width="500px" CloseAction="CloseButton"
    AllowDragging="true">
    <ContentCollection>
        <dx:ContentControl>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</p>
        </dx:ContentControl>
    </ContentCollection>
</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.

ASPXCopy 
<div id="default-popup-control-4" class="popup-target popup-target-sm"></div>
<dx:BootstrapPopupControl runat="server" ShowOnPageLoad="true" PopupElementCssSelector="#default-popup-control-4"
    PopupHorizontalAlign="Center" PopupVerticalAlign="Middle" Width="500px" CloseAction="CloseButton"
    AllowResize="true">
    <ContentCollection>
        <dx:ContentControl>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</p>
        </dx:ContentControl>
    </ContentCollection>
</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.

In this demo, a template is used to place an Update Content button within the popup window's footer. Clicking this button initiates a callback that updates the popup's content using the PerformCallback method. Use the Callback event handler to handle the callback on the server side.

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

ASPXCopy 
<div id="default-popup-control-8" class="popup-target popup-target-sm"></div>
<dx:BootstrapPopupControl runat="server" LoadContentViaCallback="OnFirstShow" ClientInstanceName="popup" ShowFooter="true"
    PopupElementCssSelector="#default-popup-control-8" PopupHorizontalAlign="Center" PopupVerticalAlign="Middle"
    Width="500px" Height="220px" CloseAction="CloseButton">
    <ContentCollection>
        <dx:ContentControl>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</p>
            <span class="badge badge-info"><%= IsCallback ? "The content was updated at " + DateTime.Now.ToLongTimeString() : "" %></span>
        </dx:ContentControl>
    </ContentCollection>
    <FooterTemplate>
        <dx:BootstrapButton Text="Update Content" AutoPostBack="false" UseSubmitBehavior="false" runat="server">
            <ClientSideEvents Click="function(s, e) { popup.PerformCallback(); }" />
            <SettingsBootstrap RenderOption="Primary" />
        </dx:BootstrapButton>
    </FooterTemplate>
</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.

ASPXCopy 
<div id="default-popup-control-5" class="popup-target popup-target-sm"></div>
<dx:BootstrapPopupControl runat="server" PopupElementCssSelector="#default-popup-control-5"
    PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" Width="500px" CloseAction="CloseButton"
    Modal="true">
    <ContentCollection>
        <dx:ContentControl>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</p>
        </dx:ContentControl>
    </ContentCollection>
</dx:BootstrapPopupControl>

Adaptive Mode

The Popup Control supports an adaptive mode, in which the popup window is shown as a modal dialog that automatically rearranges its content to fit the browser window. This dialog is displayed with a modal overlay that covers the host page preventing an end-user from interacting with its content. Scrolling the host page is also disabled.

Note that in adaptive mode, the Popup Control doesn't support resizing, dragging or absolute positioning.

Use the SettingsAdaptivity.Mode property to enable the adaptive mode. When this property is set to On, the popup window automatically switches to the adaptive mode if the browser window's width is less than the SettingsAdaptivity.SwitchAtWindowInnerWidth property value. When the SettingsAdaptivity.Mode property is set to Always, the popup window is always adaptive.

You can specify an adaptive Popup Control's vertical and horizontal alignment relative to the page boundaries using the SettingsAdaptivity.VerticalAlign and SettingsAdaptivity.HorizontalAlign properties.

The SettingsAdaptivity.VerticalAlign property accepts the following values:

  • WindowCenter - The window is centered vertically.
  • WindowTop - The window is aligned to the top.
  • WindowBottom - The window is aligned to the bottom.

The SettingsAdaptivity.HorizontalAlign property accepts the following values:

  • WindowCenter - The window is centered horizontally.
  • WindowLeft - The window is aligned to the left.
  • WindowRight - The window is aligned to the right.

The SettingsAdaptivity.FixedHeader and SettingsAdaptivity.FixedFooter properties specify whether the corresponding elements should stay fixed while an end-user scrolls an adaptive Popup Control's content.

Show QRCode
QRCode Please click here to open the demonstration page in the fullscreen mode
ASPXCopy 
<dx:BootstrapPopupControl runat="server" ClientInstanceName="popupAdaptivity"
    ShowHeader="true" ShowFooter="true" CloseAction="None" ShowCloseButton="false" ShowOnPageLoad="true">
    <SettingsAdaptivity Mode="Always" VerticalAlign="WindowCenter"
        FixedHeader="true" FixedFooter="true" />
    <ContentCollection>
        <dx:ContentControl>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida augue tellus, vel sagittis lacus venenatis eu. Donec dignissim sagittis neque id euismod. Nam porttitor, sem a pellentesque ultrices, nulla leo sagittis felis, eu blandit lacus nulla vitae sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce a elit ac eros tempus varius ut sit amet orci. Ut pharetra imperdiet faucibus. Nulla vitae turpis at leo finibus iaculis eu non ante.</p>
            <p>Vestibulum sed pretium risus, vel dictum justo. Vestibulum id elit augue. Suspendisse in mi faucibus, faucibus tellus ut, consectetur mi. Fusce egestas, diam in facilisis vulputate, felis nisi tristique ipsum, non faucibus dolor odio ac nulla. Phasellus non lorem id dui dapibus tristique at at massa. Proin dapibus vulputate mauris, sit amet molestie metus auctor ut. Nulla vel dui ut massa vehicula dictum. Sed nec sagittis nibh.</p>
        </dx:ContentControl>
    </ContentCollection>
</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.

ASPXCopy 
<div class="row target-group">
    <div class="col-md-6 text-center">
        <div id="default-popup-control-6" class="popup-target popup-target-sm">
            <h5>Fade animation</h5>
        </div>
    </div>
    <div class="col-md-6 text-center">
        <div id="default-popup-control-7" class="popup-target popup-target-sm">
            <h5>Slide animation</h5>
        </div>
    </div>
</div>
<dx:BootstrapPopupControl runat="server" PopupElementCssSelector="#default-popup-control-6" PopupAnimationType="Fade" CloseAnimationType="Fade">
    <ContentCollection>
        <dx:ContentControl>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</p>
        </dx:ContentControl>
    </ContentCollection>
</dx:BootstrapPopupControl>
<dx:BootstrapPopupControl runat="server" PopupElementCssSelector="#default-popup-control-7" PopupAnimationType="Slide" CloseAnimationType="Slide">
    <ContentCollection>
        <dx:ContentControl>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</p>
        </dx:ContentControl>
    </ContentCollection>
</dx:BootstrapPopupControl>

Templates

The Popup Control allows you to customize the contents of the popup window's elements with the corresponding templates:

  • HeaderTemplate - Specifies a template used for displaying the contents of the popup control window's header.
  • FooterTemplate - Specifies a template used for displaying the contents of the popup control window's footer.
  • HeaderContentTemplate - Specifies a template used for displaying the text content of the popup control window's header.
  • FooterContentTemplate - Specifies a template used for displaying the text content of the popup control window's footer.
ASPXCopy 
<div id="info-popup-control" class="popup-target info-popup-target">
    <h4 class="fa fa-info-circle text-info"></h4>
</div>
<dx:BootstrapPopupControl runat="server" ShowFooter="true"
    ClientInstanceName="infoPopup" PopupElementCssSelector="#info-popup-control" CloseAction="None"
    PopupHorizontalAlign="Center" PopupVerticalAlign="Middle" Width="500px">
    <HeaderTemplate>
        <h4 class="text-primary">
            <span class="fa fa-info-circle"></span> Information
        </h4>
    </HeaderTemplate>
    <FooterTemplate>
        <dx:BootstrapButton runat="server" Text="OK" AutoPostBack="false" UseSubmitBehavior="false">
            <ClientSideEvents Click="function(s, e) { infoPopup.Hide(); }" />
            <SettingsBootstrap RenderOption="Primary" />
        </dx:BootstrapButton>
    </FooterTemplate>
    <ContentCollection>
        <dx:ContentControl>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</p>
        </dx:ContentControl>
    </ContentCollection>
</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.

  • PopUp - Fires when a popup window is invoked.
  • CloseUp - Fires when a popup window closes or hides. The closeReason property allows you to identify the reason the popup window closes (API, CloseButton, etc.).

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:
ASPXJSCopy 
<div id="default-popup-control-9" class="popup-target popup-target-sm"></div>
<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" />
    <ContentCollection>
        <dx:ContentControl>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</p>
        </dx:ContentControl>
    </ContentCollection>
</dx:BootstrapPopupControl>
function onInit(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Init');
}
function onPopUp(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'PopUp');
}
function onCloseUp(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'CloseUp');
}

Client-Side Functionality

The Popup Control offers an advanced client-side API allowing you to manipulate the control and its elements.

The EnableClientSideAPI property specifies whether or not the client-side API is available. Note that the client-side API is automatically enabled if the ClientInstanceName property is specified or any client-side event available through the ClientSideEvents property is handled.

This demo allows you to interactively explore capabilities of the Popup Control's client-side API.

ASPXCopy 
<div id="default-popup-control-10" class="popup-target popup-target-sm"></div>
<dx:BootstrapPopupControl runat="server" ClientInstanceName="popupControl" PopupElementCssSelector="#default-popup-control-10"
    ShowFooter="true" ShowHeader="true" HeaderText="Header text" FooterText="Footer text"
    PopupHorizontalAlign="Center" PopupVerticalAlign="Middle" Width="500px" CloseAction="CloseButton">
    <ContentCollection>
        <dx:ContentControl>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</p>
        </dx:ContentControl>
    </ContentCollection>
</dx:BootstrapPopupControl>
Screen Size
Color Themes
Demo QR Code