CODEWITHSUNDEEP
htmlasp.net-mvc-3model-view-controllertwitter-bootstrapmodal-dialog
Ryan Duffing
Ryan Duffing

Reputation: 674

Twitter Bootstrap Modals not working with MVC3

I am attempting to implement a modal dialog inside of my MVC3 application. Right now I'm just fiddling with it. Here is my code:

@model AROrdering.Models.Category 
@{
    ViewBag.Title = "Browse";
    Layout = null;
}
<html>
<head>
<title>test</title>
<link href="@Url.Content("~/Content/testbootstrap.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/testbootstrap.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/testjquery-1.9.1.js")" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $('#showGame').click(function () {
            $('#gameModal').modal('show');
        });
    });
</script>
</head>
<body>
<div class="container">
    <div id="gameModal" class="modal hide fade in">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>This is a Modal Heading</h3>
        </div>
        <div class="modal-body">
            <h4>Text in a modal</h4>
            <p>You can add some text here.</p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-primary">Call to action</a>
            <a href="#" class="btn" data-dismiss="modal">Close</a>
        </div>
    </div>
    <button id="showGame" class="btn btn-primary btn-large">Show Game Listing</button>
</div>
</body>
</html>

If I implement this exact html in a plain html page outside of the app, the modal dialog works. But when I move the code over, it does not. I am using the same css and javascript files. Does anyone have an idea of why this breaks when I move over to MVC3?

Upvotes: 0

Views: 385

Answers (1)

ryanulit
ryanulit

Reputation: 5001

jQuery needs to load before the bootstrap javascript. Fix the order of your script references and it should work.

Upvotes: 4

Related Questions