Edit on Github

ModalDialog

in namespace DotVVM.Framework.Controls.Bootstrap4

Renders the Bootstrap modal dialog widget.

Usage & Scenarios

Renders a modal dialog popup displayed on top of the current page using Bootstrap Modal widget.

https://getbootstrap.com/docs/4.3/components/modal/

Sample 1: Basic Usage

The ModalDialog control has the HeaderText property which sets the title of the popup.

By default, the dialog title is rendered as <h4> header, but you can adjust it using the HeaderTagName property. If you need to customize the header using your own HTML content, use the HeaderTemplate property instead.

The contents of the dialog are specified using the ContentTemplate property. This is the only required property.

The button row can be customized using the FooterTemplate property.

The ModalDialog can be displayed or hidden using the IsDisplayed property. Just bind it to a bool property in the viewmodel and set it to true or false.

Closing the dialog by clicking outside of it or by pressing the Escape key will set the IsDisplayed property to false.

<bs:Button Text="Open Dialog" Type="Primary" Click="{command: OpenDialog()}" />

<bs:ModalDialog IsDisplayed="{value: Displayed}">
  <HeaderTemplate>
    My Dialog
    <bs:CloseButton/>
  </HeaderTemplate>
  <ContentTemplate>
    This is the contents of the dialog.
  </ContentTemplate>
</bs:ModalDialog>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.ModalDialog.sample2
{
    public class ViewModel
    {
        public bool Displayed { get; set; } = false;

        public void OpenDialog() 
        {
            Displayed = true;
        }
    }
}

Sample 2: ModalDialog Static Commands

You can use a Static Command to control the IsDisplayed property.

No communication with the server is required in this mode because you only work with the viewmodel property.

<bs:Button Text="Open Dialog" Click="{staticCommand: Displayed = true}" />

<bs:ModalDialog HeaderText="My Dialog" 
                IsDisplayed="{value: Displayed}">
	<ContentTemplate>
		This is the dialog.
	</ContentTemplate>
	<FooterTemplate>
		<bs:Button Text="Close Dialog" Click="{staticCommand: Displayed = false}" />
	</FooterTemplate>
</bs:ModalDialog>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.ModalDialog.sample2
{
    public class ViewModel
    {
        public bool Displayed { get; set; } = false;
    }
}

Sample 3: ModalDialog Sizing and Styles

The Size property allows to define the size of the modal dialog - Small, Normal, Large and ExtraLarge .

If the modal dialog lays over other elements in the page, you may want to modify the ZIndex property.

The UseBackdrop indicates whether the modal backdrop should be rendered under the modal dialog.

The ScrollableContent sets whether the modal dialog content would be vertically scrollable.

The CloseOnBackdropClick or CloseOnEscape properties allows to specify whether the dialog should be closed by clicking outside of it or by pressing the Escape key.

If AddCloseButton is set to true, the CloseButton control will be added to the modal dialog header.

<bs:Button Text="Open Dialog" Click="{staticCommand: Displayed = true}" />

<bs:ModalDialog HeaderText="My Dialog" 
                IsDisplayed="{value: Displayed}"
				Size="Small"
				AddCloseButton="true"
				CloseOnEscape="false"
				CloseOnBackdropClick="false"
				UseBackdrop="false"
				ScrollableContent="true" >
	<ContentTemplate>
		This is the dialog.
	</ContentTemplate>
	<FooterTemplate>
		<bs:Button Text="Close Dialog" Click="{staticCommand: Displayed = false}" />
	</FooterTemplate>
</bs:ModalDialog>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.ModalDialog.sample2
{
    public class ViewModel
    {
        public bool Displayed { get; set; } = false;
    }
}

Properties

Name Type Description Notes Default Value
property icon AddCloseButton Boolean Gets or sets whether the close button should be added to the dialog header.
attribute
inner element
static value
bindable
default
 False
property icon CloseOnBackdropClick Boolean Gets or sets whether the dialog should be closed when the user clicks outside.
attribute
inner element
static value
bindable
default
 True
property icon CloseOnEscape Boolean Gets or sets whether the dialog should be closed when the user presses the Escape key.
attribute
inner element
static value
bindable
default
 True
property icon ContentTemplate ITemplate Gets or sets the dialog content.
attribute
inner element
static value
bindable
default
 null
property icon EnableAnimation Boolean Gets or sets whether modal dialog should use fade animation.
attribute
inner element
static value
bindable
default
 True
property icon FooterTemplate ITemplate Gets or sets the contents of the dialog footer.
attribute
inner element
static value
bindable
default
 null
property icon HeaderTagName String Gets or sets tag which wraps the value of the HeaderText property. This property cannot be used together with the HeaderTemplate property.
attribute
inner element
static value
bindable
default
 h4
property icon HeaderTemplate ITemplate Gets or sets the content of the dialog header. This property cannot be used together with the HeaderText property.
attribute
inner element
static value
bindable
default
 null
property icon HeaderText String Gets or sets the text in the dialog header. If you need to customize the dialog header, use the HeaderTemplate property.
attribute
inner element
static value
bindable
default
property icon IsDisplayed Boolean Gets or sets whether the dialog is currently displayed or not. Use data-binding on this property to show and hide the dialog.
attribute
inner element
static value
bindable
default
 False
property icon ScrollableContent Boolean Gets or sets whether the inner content of modal dialog is scrollable.
attribute
inner element
static value
bindable
default
 False
property icon Size ModalSize Gets or sets the size of the dialog.
attribute
inner element
static value
bindable
default
 Normal
property icon UseBackdrop Boolean Gets or sets whether the backdrop should be displayed under the modal dialog.
attribute
inner element
static value
bindable
default
 True
property icon VerticalAlignment ModalVerticalAlignment Gets or sets the vertical alignment of the dialog.
attribute
inner element
static value
bindable
default
 Default
property icon ZIndex Int32 Gets or sets z-index value of the ModalDialog control.
attribute
inner element
static value
bindable
default
 2000

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