AlexanderLindsay

<div id="modal-container" class="modal fade hidden-print" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">

        </div>
    </div>
</div>

AlexanderLindsay

@* Create a link that calls the controller method that returns the partial view*@
@Html.ActionLink("Open Modal", "ModalAction", "Home", new { Id = id }, new
{
    @* Needed to link to the html of the modal*@
    data_target = "#modal-container",
    @* Tells the bootstrap javascript to do its thing*@
    data_toggle = "modal"
})

AlexanderLindsay

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Basic Modal</h4>
</div>
<div class="modal-body">
    <div class="form-horizontal">
        Hello World!
        @ViewBag.Id

AlexanderLindsay

$(function () {
    // when the modal is closed
    $('#modal-container').on('hidden.bs.modal', function () {
        // remove the bs.modal data attribute from it
        $(this).removeData('bs.modal');
        // and empty the modal-content element
        $('#modal-container .modal-content').empty();
    });
});

AlexanderLindsay

// boostrap 4 load modal example from docs
$('#modal-container').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var url = button.attr("href");
    var modal = $(this);

    // note that this will replace the content of modal-content ever time the modal is opened
    modal.find('.modal-content').load(url);
});