How to use the Modal component

The Modal component is one of the components that can save you a lot of work. It can be used like this:

@{ Modal warning = new Modal { Id = "ChockWarning", Heading = new Heading { Level = 0, Title = Translate("Chock Warning") + "!" }, Width = ModalWidth.Xs, BodyTemplate = RenderChockWarning() }; } @Render(warning) @helper RenderChockWarning() { @Translate("Just to warn you") }

The component needs a way to be triggered. This could be done by e.g. creating a button, like so:

@Render(new Button { Title = Translate("Alert"), OnClick = "document.getElementById('ChockWarningModalTrigger').checked = true;" })

Notice the ID - the ID of the modal trigger should always be the Modal ID + "ModalTrigger". 

An even easier way to add a warning before a button completes an action, is to simply add the properties ID, ConfirmTitle and ConfirmText to a button, and you will have the needed modal, free of charge. 

@Render(new Button { Title = Translate("Alert"), Id = "ChockWarning", ConfirmTitle = Translate("Chock Warning") + "!", ConfirmText = Translate("Just to warn you") })