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:
C%23
@{
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:
C%23
@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.
C%23
@Render(new Button { Title = Translate("Alert"), Id = "ChockWarning", ConfirmTitle = Translate("Chock Warning") + "!", ConfirmText = Translate("Just to warn you") })