La Simple Confirmation Modal/Pop-up -MVC 5/Bootstrap 3

Je suis en train de suivre le long avec de simples Modal/Pop-up guides afin d'avoir une jolie Supprimer la boîte de dialogue de Confirmation mais je n'arrive jamais à aucun d'eux de travailler.

Celui que je suis actuellement en train de travailler sur simplement se fane à l'écran mais pas de dialogue s'affiche. Celui-ci est pris à partir de: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php

<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">Launch Demo Modal</a>

<!-- Modal HTML -->
<div id="myModal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Confirmation</h3>
    </div>
    <div class="modal-body">
        <p>Do you want to save changes you made to document before closing?</p>
        <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

Mon deleteFunction en tant que telles:

Bouton

<span class="item-delete-button">
      <button type="button" onclick="deleteFunction(this)" class="btn btn-danger col-lg-3 col-lg-offset-3"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
</span>

JQuery

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;
            }
        });
    }

Tout ce que je veux, c'est un peu simple de Confirmation de Suppression.

J'ai regardé plus de 20 quelques guides maintenant, et ne peut toujours pas obtenir quelque chose pour mettre en œuvre correctement. (l'exécution de Débogage dans le navigateur Chrome aussi)

Ici est mon Avis, peut-être que quelque chose est en conflit...? (de nouveau à tout cela)

Merci pour toute aide!

@model IEnumerable<WebApplication2.Entities.Movie>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
table tr button {
opacity: 0.5;
float: right;
}
table tr:hover button {
opacity: 1;
}
</style>
<br />
<br />
<br />
<br />
<div class="panel panel-primary" style="width:100%">
<div class="panel-heading">
<span style="font-size: 30px; font-style:oblique"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-film"></span>Movies</span></span>
</div>
<div class="col-lg-offset-10 col-lg-2">
<button type="button" style="margin-top:3px; margin-bottom:3px" class="btn btn-success btn-block" onclick="location.href='@Url.Action("Create")';return false;"><span style="font-size:larger"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Movie</span></button>
</div>
<table class="table table-striped table-hover table-responsive table-condensed">
<tr>
<th>
<h4 style="font-size:x-large"><span style="font-weight:bolder">Title</span></h4>
</th>
<th>
<h4 style="font-size:x-large"><span style="font-weight:bolder">Release Date</span></h4>
</th>
<th>
<h4 style="font-size:x-large"><span style="font-weight:bolder">@Html.DisplayNameFor(model => model.Description)</span></h4>
</th>
<th>
@using (Html.BeginForm("Index", "Movie"))
{
<div class="dropdown">
<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">
<option value="0" disabled selected>Filter By...</option>
<option value="1">Movie Name</option>
<option value="2">Description</option>
</select>
</div>
<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" />
<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="" />
}
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td class="col-lg-2">
<span class="item-display">
<span style="font-size: 17px;">
@Html.DisplayFor(modelItem => item.Name)
</span>
</span>
<span class="item-field">
@Html.EditorFor(modelItem => item.Name)
</span>
</td>
<td class="col-lg-3">
<span class="item-display">
<span style="font-size: 17px;">
@Html.DisplayFor(modelItem => item.ReleaseDate)
</span>
</span>
<span class="item-field">
@Html.EditorFor(modelItem => item.ReleaseDate)
</span>
</td>
<td class="col-lg-3">
<span class="item-display">
<span style="font-size: 17px; font-style:italic">
@Html.DisplayFor(modelItem => item.Description)
</span>
</span>
<span class="item-field">
@Html.EditorFor(modelItem => item.Description)
</span>
</td>
<td class="col-lg-3 col-lg-offset-1">
<span style="visibility:hidden" class="ID col-lg-1">@Html.DisplayFor(modelItem => item.ID)</span>
<span class="item-edit-button">
<button type="button" onclick="editFunction(this)" class=" btn btn-warning col-lg-3 col-lg-offset-0"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
</span>
<span class="item-save-button">
<button type="button" onclick="saveFunction(this)" class="btn btn-success col-lg-3 col-lg-offset-4"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Save</button>
</span>
@*<span class="item-delete-button">
<button type="button" onclick="deleteFunction(this)" class="btn btn-danger col-lg-3 col-lg-offset-3"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
</span>*@
<!-- Button HTML (to Trigger Modal) -->
<span class="item-delete-button">
<a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">Launch Demo Modal</a>
</span>
<!-- Modal HTML -->
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Confirmation</h3>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="12">
<p style="font-size: 17px; font-style: italic; font-family: 'Roboto', sans-serif">
Movie ID: @Html.DisplayFor(modelItem => item.ID)
<br />
Placeholder
</p>
</td>
</tr>
}
</table>
<span style="font-style: italic; font-size: 15px; font-family: 'Roboto', sans-serif; padding-top:0px" />Click Movie for details</span>
</div>
<script>
$(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");
}
});
});
</script>
<script>
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;
}
});
}
</script>
@Scripts.Render("~/bundles/myscript")