Creating a modal with bootstrap in ASP.NET MVC
<p>I'm using .NET Framework 4.5, Bootstrap v3.3.6 on a ASP.NET MVC project.</p>

<p>What I want to do is create a modal form</p>

<p><strong>I tried the following:</strong></p>

<ol>
<li><p>Created a modal container in the main layout</p>

<pre><code>&lt;div id="modal-container" class="modal fade" tabindex="-1" role="dialog" style="border: 5px solid #3A87AD;"&gt;
    &lt;a href="#close" title="Close" class="modal-close-btn"&gt;x&lt;/a&gt;
    &lt;div class="modal-content" style="width:500px !important; margin: 10px auto !important;"&gt;
        &lt;div class="modal-body"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre></li>
<li><p>Added js to make internal Ajax call to inject content in a partial view</p>

<pre><code>$(function () {
    $('body').on('click', 'modal-link', function (e) {
        e.preventDefault();
        $(this).attr('data-target', '#modal-container');
        $(this).attr('data-toggle', 'modal');
    });

    $('body').on('click', 'modal-close-btn', function() {
        $('modal-container').modal('hide');
    });

    $('#modal-container').on('hidden.bs.modal', function(){
        $(this).removeData('bs.modal');
    });
});
</code></pre></li>
<li><p>Created a partial view that to load in a modal dialog</p>

<pre><code>&lt;div class=" "&gt;
    &lt;div class="modal-title" style="color: #3A87AD;"&gt;
        &lt;h3&gt; Add Content&lt;/h3&gt;
    &lt;/div&gt;
    &lt;br /&gt;
    @using (Html.BeginForm("Create", "Place", FormMethod.Post))
    {
        &lt;div class="row-fluid"&gt;
            Enter Content
        &lt;/div&gt;
        &lt;div class="row-fluid"&gt;
            @Html.textAreaFor(m =&gt; m.Text, new { style="width:400px; height:200px;"})
        &lt;/div&gt;
        &lt;div class="row-fluid"&gt;
            &lt;div class="col-md-4 col-md-offset-4"&gt;
                &lt;button type="submit" id="btnSave" class="btn btn-sm"&gt;Save&lt;/button&gt;
                &lt;button type="button" class="btn btn-sm" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    }
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
    $(function () {
        $('#btnSave').click(function () {
            $('#modal-container').modal('hide');
        });
    });
&lt;/script&gt;
</code></pre></li>
<li><p>Created action to return the partial view and to process the results of the post </p>

<pre><code>public ActionResult CreateModal()
{
    return PartialView("_CreateModal");
}

[HttpPost]
public ActionResult CreateModal(Place model)
{
    return RedirectToAction("Index");
}
</code></pre></li>
<li><p>Created an action link to show the modal when clicked </p>

<pre><code>@Html.ActionLink("Click me", "CreateModal", "Place", null, new { @class = "img-btn-addcontent modal-link", title = "Add Content" })`
</code></pre></li>
</ol>

<p><strong>My problem is that my modal doesnt look like a modal</strong></p>

<p><a href="https://i.stack.imgur.com/9TIto.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9TIto.png" alt="enter image description here"></a></p>