title: Simple Confirmation Modal/Pop-up -MVC 5/Bootstrap 3
body: <p>I am trying to follow along with simple Modal/Pop-up guides in order have a nice Delete Confirmation dialogue but I can never seem to get any of them to work.</p>
  
  <p>The one I am currently working on simply fades the screen but no dialogue appears. This one is taken from: <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php" rel="nofollow">http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php</a></p>
  
  <pre><code>&lt;!-- Button HTML (to Trigger Modal) --&gt;
  &lt;a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal"&gt;Launch Demo Modal&lt;/a&gt;
  
  &lt;!-- Modal HTML --&gt;
  &lt;div id="myModal" class="modal hide fade"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
          &lt;h3&gt;Confirmation&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;p&gt;Do you want to save changes you made to document before closing?&lt;/p&gt;
          &lt;p class="text-warning"&gt;&lt;small&gt;If you don't save, your changes will be lost.&lt;/small&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
          &lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My current deleteFunction works as such:</p>
  
  <p><strong>Button</strong></p>
  
  <pre><code>&lt;span class="item-delete-button"&gt;
        &lt;button type="button" onclick="deleteFunction(this)" class="btn btn-danger col-lg-3 col-lg-offset-3"&gt;&lt;span style="margin-right: 5px" class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;Delete&lt;/button&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>function deleteFunction(element) {
          var newID = $(element).closest("td").find("span.ID").text();
  
          $(element).closest("table").removeClass("table-hover");
          $(element).closest("tr").css('background-color', 'red');     
  
          $(document).ready(function () {
              var answer = confirm("Are you sure you want to delete this movie?");
              if (answer) {
                  $.post(
              '@Url.Action("customDelete", "Movie")',
              {
                  'id': newID
              },
              function (data) { },
              "json"
              );
                  $(element).closest("tr").remove();
                  return true;
              } else {
                  $(element).closest("tr").css('background-color', 'initial');
                  return false;
              }
          });
      }
  </code></pre>
  
  <p>All I want is a simple little Delete Confirmation.</p>
  
  <p>I have looked at over 20 some guides now and still cannot get anything to implement correctly. (running Debug in Chrome as well)</p>
  
  <p>Here is my entire View, maybe something is conflicting...? (new to all of this)</p>
  
  <p>Thank you for any and all help!</p>
  
  <pre><code>@model IEnumerable&lt;WebApplication2.Entities.Movie&gt;
  
  @{
      ViewBag.Title = "Index";
      Layout = "~/Views/Shared/_Layout.cshtml";
  }
  &lt;style type="text/css"&gt;
      table tr button {
          opacity: 0.5;
          float: right;
      }
  
      table tr:hover button {
          opacity: 1;
      }
  &lt;/style&gt;
  
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;div class="panel panel-primary" style="width:100%"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;span style="font-size: 30px; font-style:oblique"&gt;&lt;span style="font-size:larger;"&gt;&lt;span style="margin-right: 5px" class="glyphicon glyphicon-film"&gt;&lt;/span&gt;Movies&lt;/span&gt;&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class="col-lg-offset-10 col-lg-2"&gt;
          &lt;button type="button" style="margin-top:3px; margin-bottom:3px" class="btn btn-success btn-block" onclick="location.href='@Url.Action("Create")';return false;"&gt;&lt;span style="font-size:larger"&gt;&lt;span style="margin-right: 5px" class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;Add New Movie&lt;/span&gt;&lt;/button&gt;
  
      &lt;/div&gt;
  
      &lt;table class="table table-striped table-hover table-responsive table-condensed"&gt;
  
  
  
  
          &lt;tr&gt;
              &lt;th&gt;
                  &lt;h4 style="font-size:x-large"&gt;&lt;span style="font-weight:bolder"&gt;Title&lt;/span&gt;&lt;/h4&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;h4 style="font-size:x-large"&gt;&lt;span style="font-weight:bolder"&gt;Release Date&lt;/span&gt;&lt;/h4&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;h4 style="font-size:x-large"&gt;&lt;span style="font-weight:bolder"&gt;@Html.DisplayNameFor(model =&gt; model.Description)&lt;/span&gt;&lt;/h4&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  @using (Html.BeginForm("Index", "Movie"))
                  {
                      &lt;div class="dropdown"&gt;
                          &lt;select class="btn btn-group-lg btn-default col-lg-4" style="margin-top: 15px; width:40%; height: 36px; opacity: 1" data-toggle="dropdown" name="Filter"&gt;
                              &lt;option value="0" disabled selected&gt;Filter By...&lt;/option&gt;
                              &lt;option value="1"&gt;Movie Name&lt;/option&gt;
                              &lt;option value="2"&gt;Description&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
  
                      &lt;input type="text" name="searchString" class="col-lg-6" style="margin-top: 16px; width:48%; text-align:center; height:35px; font-size:20px" placeholder="enter text" /&gt;
                      &lt;button type="submit" class="btn btn-group-lg btn-primary col-lg-2 glyphicon glyphicon-arrow-right" style="margin-top: 15px; width:12%; height:36px; opacity:1" value="" /&gt;
                  }
              &lt;/th&gt;
          &lt;/tr&gt;
  
          @foreach (var item in Model)
          {
  
              &lt;tr&gt;
  
                  &lt;td class="col-lg-2"&gt;
                      &lt;span class="item-display"&gt;
                          &lt;span style="font-size: 17px;"&gt;
                              @Html.DisplayFor(modelItem =&gt; item.Name)
                          &lt;/span&gt;
                      &lt;/span&gt;
                      &lt;span class="item-field"&gt;
                          @Html.EditorFor(modelItem =&gt; item.Name)
                      &lt;/span&gt;
  
                  &lt;/td&gt;
  
  
                  &lt;td class="col-lg-3"&gt;
                      &lt;span class="item-display"&gt;
                          &lt;span style="font-size: 17px;"&gt;
                              @Html.DisplayFor(modelItem =&gt; item.ReleaseDate)
                          &lt;/span&gt;
                      &lt;/span&gt;
                      &lt;span class="item-field"&gt;
                          @Html.EditorFor(modelItem =&gt; item.ReleaseDate)
                      &lt;/span&gt;
                  &lt;/td&gt;
  
  
                  &lt;td class="col-lg-3"&gt;
                      &lt;span class="item-display"&gt;
                          &lt;span style="font-size: 17px; font-style:italic"&gt;
                              @Html.DisplayFor(modelItem =&gt; item.Description)
                          &lt;/span&gt;
                      &lt;/span&gt;
                      &lt;span class="item-field"&gt;
                          @Html.EditorFor(modelItem =&gt; item.Description)
                      &lt;/span&gt;
                  &lt;/td&gt;
  
  
                  &lt;td class="col-lg-3 col-lg-offset-1"&gt;
                      &lt;span style="visibility:hidden" class="ID col-lg-1"&gt;@Html.DisplayFor(modelItem =&gt; item.ID)&lt;/span&gt;
  
                      &lt;span class="item-edit-button"&gt;
                          &lt;button type="button" onclick="editFunction(this)" class=" btn btn-warning col-lg-3 col-lg-offset-0"&gt;&lt;span style="margin-right: 5px" class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;Edit&lt;/button&gt;
                      &lt;/span&gt;
  
                      &lt;span class="item-save-button"&gt;
                          &lt;button type="button" onclick="saveFunction(this)" class="btn btn-success col-lg-3 col-lg-offset-4"&gt;&lt;span style="margin-right: 5px" class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;Save&lt;/button&gt;
                      &lt;/span&gt;
                      @*&lt;span class="item-delete-button"&gt;
                              &lt;button type="button" onclick="deleteFunction(this)" class="btn btn-danger col-lg-3 col-lg-offset-3"&gt;&lt;span style="margin-right: 5px" class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;Delete&lt;/button&gt;
                          &lt;/span&gt;*@
  
  
  
                      &lt;!-- Button HTML (to Trigger Modal) --&gt;
                      &lt;span class="item-delete-button"&gt;
                          &lt;a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal"&gt;Launch Demo Modal&lt;/a&gt;
                      &lt;/span&gt;
                      &lt;!-- Modal HTML --&gt;
                      &lt;div id="myModal" class="modal hide fade"&gt;
                          &lt;div class="modal-header"&gt;
                              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                              &lt;h3&gt;Confirmation&lt;/h3&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-body"&gt;
                              &lt;p&gt;Do you want to save changes you made to document before closing?&lt;/p&gt;
                              &lt;p class="text-warning"&gt;&lt;small&gt;If you don't save, your changes will be lost.&lt;/small&gt;&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-footer"&gt;
                              &lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
                              &lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
  
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
  
                  &lt;td colspan="12"&gt;
                      &lt;p style="font-size: 17px; font-style: italic; font-family: 'Roboto', sans-serif"&gt;
                          Movie ID: @Html.DisplayFor(modelItem =&gt; item.ID)
                          &lt;br /&gt;
                          Placeholder
                      &lt;/p&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  
          }
      &lt;/table&gt;
      &lt;span style="font-style: italic; font-size: 15px; font-family: 'Roboto', sans-serif; padding-top:0px" /&gt;Click Movie for details&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  
  
      $(function () {
          $("td[colspan=12]").find("p").hide();
          $("td[colspan=12]").addClass("nopadding");
  
          $("tr").click(function () {
              var $target = $(this);
              var $detailsTd = $target.find("td[colspan=12]");
              if ($detailsTd.length) {
                  $detailsTd.find("p").slideUp();
                  $detailsTd.addClass("nopadding");
              } else {
                  $detailsTd = $target.next().find("td[colspan=12]");
                  $detailsTd.find("p").slideToggle();
                  $detailsTd.toggleClass("nopadding");
              }
          });
      });
  &lt;/script&gt;
  
  &lt;script&gt;
      function editFunction(element) {
          $(element).closest("span").hide();
          $(element).closest("td").find("span.item-save-button").show();
          $(element).closest("td").find("span.item-delete-button").hide();
  
          $(element).closest("td").prev("td").find("span.item-display")
              .hide()
              .next("span.item-field")
              .show();
  
          $(element).closest("td").prev("td").prev("td").find("span.item-display")
              .hide()
              .next("span.item-field")
              .show();
  
          $(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display")
              .hide()
              .next("span.item-field")
              .show();
      }
  
      function saveFunction(element) {
          var three = $(element).closest("td").prev("td").find("span.item-field").find(":input:first").val();
          var two = $(element).closest("td").prev("td").prev("td").find("span.item-field").find(":input:first").val();
          var one = $(element).closest("td").prev("td").prev("td").prev("td").find("span.item-field").find(":input:first").val();
  
          if (one == "" || three == "" || two == "") {
              if (one == "") {
                  alert("invalid name");
              }
              if (two == "") {
                  alert("invalid date");
              }
              if (three == "") {
                  alert("invalid desc");
              }
  
          } else {
              $(element).closest("span").hide();
              $(element).closest("td").find("span.item-edit-button").show();
              $(element).closest("td").find("span.item-delete-button").show();
  
              $(element).closest("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").find("span.item-field").find(":input:first").val());
              $(element).closest("td").prev("td").find("span.item-display")
                  .show()
                  .next("span.item-field")
                  .hide();
  
              $(element).closest("td").prev("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").prev("td").find("span.item-field").find(":input:first").val());
              $(element).closest("td").prev("td").prev("td").find("span.item-display")
                  .show()
                  .next("span.item-field")
                  .hide();
  
              $(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").prev("td").prev("td").find("span.item-field").find(":input:first").val());
              $(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display")
                  .show()
                  .next("span.item-field")
                  .hide();
  
              var newID = $(element).closest("td").find("span.ID").text();
              var newName = $(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display").text();
              var newRelease = $(element).closest("td").prev("td").prev("td").find("span.item-display").text();
              var newDescription = $(element).closest("td").prev("td").find("span.item-field").find(":input:first").val();
  
              $.post(
                  '@Url.Action("customEdit", "Movie")',
                   {
                       'id': newID,
                       'name': newName,
                       'date': newRelease,
                       'desc': newDescription
                   },
                  function (data) { },
                  "json"
              );
          }
      }
  
  
      function deleteFunction(element) {
          var newID = $(element).closest("td").find("span.ID").text();
  
          $(element).closest("table").removeClass("table-hover");
          $(element).closest("tr").css('background-color', 'red');
  
          $(document).ready(function () {
              var answer = confirm("Are you sure you want to delete this movie?");
              if (answer) {
                  $.post(
              '@Url.Action("customDelete", "Movie")',
              {
                  'id': newID
              },
              function (data) { },
              "json"
              );
                  $(element).closest("tr").remove();
                  return true;
              } else {
                  $(element).closest("tr").css('background-color', 'initial');
                  return false;
              }
          });
      }
  
  &lt;/script&gt;
  @Scripts.Render("~/bundles/myscript")
  </code></pre>