title: Creating a modal with bootstrap in ASP.NET MVC
body: <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>