ModalDialog

Core

Tag Helper <modal-dialog>

Shows the bootstrap modal dialog box.

Attributes

<modal-dialog>

string Id

The Id for the dialog and prefix id for inner elements.

BackDrops BackDrop

The modal type. Either Static or None. Static does not allow hiding by clicking out of the dialog.

string Title

The title line of the dialog.

bool show-close

Default: true

Shows the Close button in the footer. Element id = Id_close

bool show-ok

Default: false

Shows the Ok button in the footer. Element id = Id_ok

bool show-cancel

Default: false

Shows the Cancel button in the footer. Element id = Id_cancel

Javascript Element Ids

Id_title

Title for the dialog.

Id_body

Body element.

Id_ok

The footer Ok button.

Id_cancel

The footer Cancel button.

Id_close

The footer Close button.

Event Example

Razor

<modal-dialog id="MyModalDialog" show-close="false" show-ok="true" show-cancel="true">

This is the body <strong>html</strong> of the dialog

</modal-dialog>

Javascript$('#MyActionToShowDialog').click(function () {
    $('#MyModalDialog').modal('show');
    $('body').on('click', '#MyModalDialog_ok', App.Controller.Ok);
    $('#MyModalDialog').on('hide.bs.modal', function () {
        $('body').off('click', '#MyModalDialog_ok', App.Controller.Ok);
    });
});

App.Controller.Ok = function () {
    $('#MyActionToShowDialog').append('<input type="hidden" name="SubmitButtonNameToUseOnControllerPostBack" />');
    $('#MyActionToShowDialog').closest('form').submit();
}