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 a Close button and the popup body with the specified content. Use the Content method to specify the Popup Control's content.

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 Modal method (available through SettingsAdaptivity) to make your dialog responsive.

<div id="default-popup-element" class="popup-target popup-target-sm"></div>
@(Html.DevExpress()
    .BootstrapPopupControl("PopupControlDefault")
    .ShowOnPageLoad(true)
    .PopupElementCssSelector("#default-popup-element")
    .PopupHorizontalAlign(PopupHorizontalAlign.Center)
    .PopupVerticalAlign(PopupVerticalAlign.Middle)
    .CloseAction(CloseAction.CloseButton)
    .Width("500px")
    .Content(@<text>
        ...
    </text>))

Header and Footer

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

@(Html.DevExpress()
    .BootstrapPopupControl("HeaderFooter")
    .ShowFooter(true)
    .ShowHeader(true)
    ...
    )

Dragging

The Popup Control can be dragged within the bounds of the client browser's window. Call the AllowDragging method with the true parameter to enable this functionality.

@(Html.DevExpress()
    .BootstrapPopupControl("Dragging")
    .AllowDragging(true)
    ...
)

Resizing

The Popup Control supports resizing. To enable this feature, call the AllowResize method with the true parameter. A popup window's size limits can be specified via the MinHeight, MinWidth, MaxHeight, and MaxWidth methods.

@(Html.DevExpress()
    .BootstrapPopupControl("Resizing")
    .AllowResize(true)
    ...
)

Load Content on Demand

The Bootstrap Popup Control has the capability to load the content of popup windows on demand using AJAX requests. You can specify the content loading mode by calling the Popup Control's LoadContentViaCallback method. The following modes are available:

If you are using the OnPageLoad or OnFirstShow modes, you also need to specify AJAX requests routing using the MapRoutes method (available through Routs).

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

<div id="LoadOnDemand" class="popup-target popup-target-sm"></div>
@Html.Partial("Popup/PopupControlLoadOnDemandPartial")
@(Html.DevExpress()
    .BootstrapPopupControl("LoadOnDemandPopupControl")
    .LoadContentViaCallback(LoadContentViaCallback.OnFirstShow)
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("Layout")
            .Action("PopupControlLoadOnDemandPartial")))
    .PopupElementCssSelector("#LoadOnDemand")
    .PopupHorizontalAlign(PopupHorizontalAlign.Center)
    .PopupVerticalAlign(PopupVerticalAlign.Middle)
    .Width(500)
    .CloseAction(CloseAction.CloseButton)
    .Content(@<text>
        <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>
    </text>))
using Microsoft.AspNetCore.Mvc;
using System.Threading;
namespace DevExpress.AspNetCore.Demos {
    public partial class LayoutController : Controller {
        public ActionResult PopupControlLoadOnDemand() {
            return PartialView("Popup/PopupControlLoadOnDemand");
        }
        [HttpPost]
        public ActionResult PopupControlLoadOnDemandPartial() {
            Thread.Sleep(1000);
            return PartialView("Popup/PopupControlLoadOnDemandPartial");
        }
    }
}

Modal Mode

In modal mode, the Popup Control prohibits interactions with the parent page. To enable the modal mode, call the Popup Control's Modal method with true parameter.

@(Html.DevExpress()
    .BootstrapPopupControl("Modal")
    .Modal(true)
    ...
    )

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 Mode method (available through SettingsAdaptivity) to enable the adaptive mode. If this method has been called with the On parameter, the popup window automatically switches to the adaptive mode if the browser window’s width is less than the value specified using the SwitchAtWindowInnerWidth method (available through SettingsAdaptivity). If the Mode method has been called with the Always parameter, 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 VerticalAlign and HorizontalAlign methods available through SettingsAdaptivity.

The VerticalAlign method accepts the following values:

The HorizontalAlign methodaccepts the following values:

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

@(Html.DevExpress()
    .BootstrapPopupControl("popupAdaptivity")
    .ShowHeader(true)
    .ShowFooter(true)
    .ShowCloseButton(false)
    .CloseAction(CloseAction.None)
    .ShowOnPageLoad(true)
    .SettingsAdaptivity(settings => settings
        .Mode(PopupControlAdaptivityMode.Always)
        .VerticalAlign(PopupAdaptiveVerticalAlign.WindowCenter)
        .FixedHeader(true)
        .FixedFooter(true))
    ...
    )

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, use the PopupAnimationType and CloseAnimationType methods.

@(Html.DevExpress()
        .BootstrapPopupControl("Fade")
        .PopupAnimationType(AnimationType.Fade)
        .CloseAnimationType(AnimationType.Fade)
        ...
)
@(Html.DevExpress()
    .BootstrapPopupControl("Slide")
    .PopupAnimationType(AnimationType.Slide)
    .CloseAnimationType(AnimationType.Slide)
    ...
)

Templates

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

@(Html.DevExpress()
    .BootstrapPopupControl("infoPopupControl")
    .ShowFooter(true)
    .HeaderTemplate(@<text>
            <h4 class="text-primary">
                <span class="fa fa-info-circle"></span> Information
            </h4>
        </text>)
    .FooterTemplate(@<text>
            @(Html.DevExpress()
                .BootstrapButton("okButton")
                .Text("OK")
                .UseSubmitBehavior(false)
                .ClientSideEvents(events => events
                    .Click("function(s, e) { infoPopupControl.Hide(); }"))
                .SettingsBootstrap(bootstrap => bootstrap.RenderOption(BootstrapRenderOption.Primary))
            )
        </text>)
    .CloseAction(CloseAction.None)
    ...
)

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:
@(Html.DevExpress()
    .BootstrapPopupControl("ClientSideEvents")
    .ClientSideEvents(events => {
        events.Init("onInit");
        events.PopUp("onPopUp");
        events.CloseUp("onCloseUp");
    })
    ...
)
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 method specifies whether or not the client-side API is available. Note that the client-side API is automatically enabled if the ClientInstanceName method has been called or any client-side event available through the ClientSideEvents method is handled.

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

@(Html.DevExpress()
    .BootstrapPopupControl("popupControl")
    .EnableClientSideAPI(true)
    ...
)
Screen Size
Color Themes
Demo QR Code