Modal TagHelper

This collection of tag helpers provides a less verbose syntax for showing a Bootstrap Modal.

The modal requires an id and a title attribute. The body of the modal is placed in the modal-body tag helper while the footer (buttons) are optionally placed in the modal-footer tag helper.

Buttons or other elements can be used to toggle the modal by adding the bs-toggle-modal tag helper attribute and referencing the id of the modal.

Simple Modal:

Code:

<button type="button" 
        class="btn btn-primary btn-lg" 
        bs-toggle-modal="simpleModal">
    Launch modal
</button>
<modal id="simpleModal" 
            title="Modal Title" >
    <modal-body>
        <h4>Something happened</h4>
        <p>Something happened</p>
    </modal-body>
</modal>

Simple Modal toggle from Anchor Tag:

Launch modal

Code:


<a href="#" bs-toggle-modal="simpleModalFromAnchor">
    Launch modal
</a>
<modal id="simpleModalFromAnchor"
        title="Modal Title">
    <modal-body>
        <h4>Something happened</h4>
        <p>Something happened</p>
    </modal-body>
</modal>

Simple Modal with Footer:

Code:


<button type="button"
        class="btn btn-primary btn-lg"
        bs-toggle-modal="simpleModalWithFooter">
    Launch modal
</button>
<modal id="simpleModalWithFooter"
        title="Modal Title">
    <modal-body>
        <h4>Something happened</h4>
        <p>Something happened</p>
    </modal-body>
    <modal-footer dismiss-text="Close">
        <button type="button" class="btn btn-primary">Save Changes</button>
    </modal-footer>
</modal>

Modal containing other tag helpers:

Code:

<button type="button"
        class="btn btn-primary btn-lg"
        bs-toggle-modal="nestedExample">
    Launch modal
</button>
<modal id="nestedExample"
            title="Modal with Tag Helpers in it"
            confirm-text="Keep Going">
    <modal-body>
        <h4>Something happened</h4>
        <p>Something happened</p>
        <div bs-progress-value="25"></div>
        <alert message="You are only 25% done."></alert>
    </modal-body>
    <modal-footer show-dismiss="false">
        <button type="button" class="btn btn-primary">Keep Going</button>
    </modal-footer>
</modal>