Edit on Github

ModalDialog

in namespace DotVVM.BusinessPack.Controls

Renders a modal dialog window inside a page.

Usage & Scenarios

Creates a div element styled as a modal dialog that can be shown or hidden at any time.

When the dialog is displayed, the content behind it is covered by a semi-transparent backdrop and thus cannot be interacted with.

The Business Pack includes also the Window which can display a similar window but keeps the content behind unlocked.

Sample 1: Basic Usage

The content inside the <bp:ModalDialog> element is treated as a ContentTemplate property which specifies the main content of the dialog.

The IsDisplayed property is bound to the bool property in the viewmodel which controls whether the dialog is shown or hidden. When the user hides the dialog, the property is set to false automatically.

<bp:ModalDialog IsDisplayed="{value: IsModalDisplayed}">
    <p>Hello!</p>
</bp:ModalDialog>
<bp:Button Text="Show Modal Dialog"
           Click="{command: IsModalDisplayed = true}" />
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ModalDialog.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public bool IsModalDisplayed { get; set; }
    }
}

Sample 2: Header And Footer

The HeaderText can be used to specify the text in the dialog header. Alternatively, you can use the HeaderTemplate property to be able to use any HTML content inside the dialog header.

The same applies to the FooterText and FooterTemplate properties which can be used to customize the dialog footer row.

<%-- Custom content with header and footer text --%>
<bp:ModalDialog HeaderText="This is header"
                FooterText="This is footer."
                IsDisplayed="{value: IsModal1Displayed}">
    <p>Display modal dialog content here.</p>
</bp:ModalDialog>
<bp:Button Text="Show Modal Dialog"
           Click="{command: IsModal1Displayed = true}" />

<%-- Custom content with header and footer template --%>
<bp:ModalDialog IsDisplayed="{value: IsModal2Displayed}">
    <HeaderTemplate>
        <h3>This is header</h3>
    </HeaderTemplate>
    <ContentTemplate>
        <p>Display modal dialog content here.</p>
    </ContentTemplate>
    <FooterTemplate>
        <i>This is footer.</i>
    </FooterTemplate>
</bp:ModalDialog>
<bp:Button Text="Show templated Modal Dialog"
           Click="{command: IsModal2Displayed = true}" />
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ModalDialog.sample2
{
    public class ViewModel : DotvvmViewModelBase
    {
        public bool IsModal1Displayed { get; set; }
        public bool IsModal2Displayed { get; set; }
    }
}

Sample 3: Closing Dialog

By default, the dialog can be closed when the user clicks outside it.

The CloseOnOutsideClick can be used to disable this behavior. If it is set to false, the dialog will stay open when the user clicks anywhere outside it.

<bp:ModalDialog IsDisplayed="{value: IsModalDisplayed}"
                CloseOnOutsideClick="false">
    <p>Now you cannot click outside of the dialog to close it.</p>
</bp:ModalDialog>
<bp:Button Text="Show Modal"
           Click="{command: IsModalDisplayed = true}" />
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ModalDialog.sample3
{
    public class ViewModel : DotvvmViewModelBase
    {
        public bool IsModalDisplayed { get; set; }
    }
}

Sample 4: Dialog Size

The WidthRequest and HeightRequest properties can be used to specify requested dimensions of the dialog (in pixels). If the screen is smaller than the requested size, the dialog will take all available space.

You can fine-tune dialog sizing on various screen sizes using CSS.

<bp:ModalDialog IsDisplayed="{value: IsCustomSizeModalVisible}"
                WidthRequest="800"
                HeightRequest="300">
    <p>I have custom size.</p>
</bp:ModalDialog>

<bp:Button Text="Show Modal Dialog with custom size"
           Click="{command: IsCustomSizeModalVisible = true}" />
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ModalDialog.sample4
{
    public class ViewModel : DotvvmViewModelBase
    {
        public bool IsCustomSizeModalVisible { get; set; }
        public bool IsResizableModalVisible { get; set; }
    }
}

Properties

Name Type Description Notes Default Value
property icon AllowResize Boolean Gets or sets whether user is allowed to resize the dialog. It's enabled by default.
attribute
inner element
static value
bindable
default
 True
property icon AnimationDuration Double Gets or sets how long will the open and close animations run (in seconds). If the value is equal to 0, dialog is not animated. The default value is 0.25 seconds.
attribute
inner element
static value
bindable
default
 0.25
property icon CloseOnEscape Boolean Gets or sets whether dialog will be closed when user hits the Escape key. It's enabled by default.
attribute
inner element
static value
bindable
default
 True
property icon CloseOnOutsideClick Boolean Gets or sets whether dialog will be closed when user clicks outside the dialog. It's enabled by default.
attribute
inner element
static value
bindable
default
 True
property icon ContentTemplate ITemplate Gets or sets template for content part of dialog.
attribute
inner element
static value
bindable
default
 null
property icon DeathZoneSize Int32 Gets or sets size (in px) of zone around the dialog borders where modal cannot be moved or resized into. The default size is 10px.
attribute
inner element
static value
bindable
default
 0
property icon FooterTemplate ITemplate Gets or sets the template for the footer part of the dialog.
attribute
inner element
static value
bindable
default
 null
property icon FooterText String Gets or sets the text of the footer part of the dialog. This property cannot be combined with the FooterTemplate property.
attribute
inner element
static value
bindable
default
property icon HeaderTemplate ITemplate Gets or sets the template for the header part of the dialog.
attribute
inner element
static value
bindable
default
 null
property icon HeaderText String Gets or sets the text of the header part of the dialog. This property cannot be combined with the HeaderTemplate property.
attribute
inner element
static value
bindable
default
property icon Height String Gets or sets the height of the dialog. The value uses the CSS syntax, e.g. 640px or 80%. It is not set by default.
attribute
inner element
static value
bindable
default
 null
property icon InitialPositionBottom String
attribute
inner element
static value
bindable
default
 null
property icon InitialPositionLeft String Gets or sets initial position from left border. The value uses the CSS syntax, e.g. 200px or 10%. It is not set by default.
attribute
inner element
static value
bindable
default
 null
property icon InitialPositionRight String
attribute
inner element
static value
bindable
default
 null
property icon InitialPositionTop String Gets or sets initial position from top border. The value uses the CSS syntax, e.g. 200px or 10%. It is not set by default.
attribute
inner element
static value
bindable
default
 null
property icon IsDisplayed Boolean Gets or sets the value indicating whether the dialog is visible.
attribute
inner element
static value
bindable
default
 False
property icon MinHeight Int32 Gets or sets the minimum height of dialog in pixels. The default value is 150.
attribute
inner element
static value
bindable
default
 150
property icon MinWidth Int32 Gets or sets the minimum width of the dialog in pixels. The default value is 250.
attribute
inner element
static value
bindable
default
 250
property icon ShowOverlay Boolean Gets or sets whether an overlay is displayed under the dialog. It's enabled by default.
attribute
inner element
static value
bindable
default
 True
property icon Width String Gets or sets the width of the dialog. The value uses the CSS syntax, e.g. 640px or 80%. The default value is 640px.
attribute
inner element
static value
bindable
default
 640px

HTML produced by the control

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Edit options

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Choose which cookies you want to enable

Necessary cookies Always allowed

Necessary cookies are essential and maintain information based on your activity on our site, like remembering your signed in account, selection of your language, or products added to the shopping cart. The website cannot work properly without these cookies.

Google Analytics

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Google Inc.

Google Ads

We use these cookies to measure conversions from our advertisement and banners distributed via Google Ads. This allows us to better target the ads and make them more relevant to you.

Facebook Pixel

We use these cookies to measure conversions from our advertisement and banners distributed via Facebook. This allows us to better target the ads and make them more relevant to you.

Smartlook

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Smartlook.

Google ads user data

Google ads ad personalization