Bootstrap Modal in MVC5

Question

I am trying to open a modal dialog in Bootstrap v3.3.5 and am having no luck. Nothing is displaying when I click my link.

I would really appreciate any help as to what I am doing wrong.

Here is the script code in the head section:

   $('body').on('click', '.modal-link', function (e) {
        e.preventDefault();
        $(this).attr('data-target', '#modal-container');
        $(this).attr('data-toggle', 'modal');
    });
    // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
    $('body').on('click', '.modal-close-btn', function () {
        $('#modal-container').modal('hide');
    });
    //clear modal cache, so that new content can be loaded
    $('#modal-container').on('hidden.bs.modal', function () {
        $(this).removeData('bs.modal');
    });
    $('#CancelModal').on('click', function () {
        return false;
    });

Here is the DIV:

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

Here is the ActionLink that is supposed to open this modal (it's styled as a button but that shouldn't matter, it still has the modal-link class attached to it):

@Html.ActionLink("Approve Pending",
    "Home", "ViewApprovalModal",
    null, new { @class = "modal-link btn btn-success", style = "font-size: 17px;" })

And finally, this is the C# code that the ActionLink is calling in the HomeController, which is simply returning the partial that the modal should display:

public ActionResult ViewApprovalModal() {
    return PartialView("_ApprovalModal");
}

Nothing happens when I click the ActionLink, and I get no errors or any other warnings of any sort in the developer console, which is why I am so confused. It just does nothing with no errors.

Answer 1

Do you have a requirement to make the server side call? If not I would get rid of that and do this client side.

<button type="button" class="modal-link btn btn-success" 
        data-toggle="modal" data-target="#modal-container"
        style="font-size: 17px;">
    Approve Pending
</button>

@Html.Partial("_ApprovalModal")

Your modal may need the following divs:

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

            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">

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

You shouldn't need any additional JavaScript unless you want to write custom events.

Answer 2

Try including this in your script

<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />

And try following Div

<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
  <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">Your title</h4>
  </div>
 <div class="modal-body">
 <p>Your Body&hellip;</p>
 </div>
</div>
</div>
</div>