간단한 확인 모달 / 팝업 -MVC 5 / 부트 스트랩 3

https://stackoverflow.com//questions/24001844

20-12-2019
|

문제

나는 단순한 모달 / 팝업 가이드와 함께 따르려고 노력하고 있으므로 좋은 삭제 확인 대화가 있지만 결코 일할 수없는 것처럼 보일 수 없습니다.

현재 일하고있는 것은 단순히 화면을 사라지지 만 대화가 나타나지 않습니다.이 것은 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>

내 현재 delete 기능은 다음과 같이 작동합니다.

버튼

<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

원하는 것은 간단한 삭제 확인입니다.

지금 20 개가 넘는 가이드를 살펴 보았습니다. 이제는 여전히 올바르게 구현할 것도 없을 것입니다.(크롬에서 디버그 실행)

여기에 전체 전망이 있습니다, 어쩌면 무언가가 충돌하는 것입니다 ...?(이 모든 것의 새로운 것)

모든 도움을 주셔서 감사합니다!

@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>*@  <span class="item-delete-button"> <a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">Launch Demo Modal</a> </span>  <div id="myModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</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")
.

해결책

왜 이것이 왜 그렇게 열심히 있었는지 잘 모르겠지만, 결국 나는 그것이 일하기 위해 그것을 얻었습니다.

버튼

<!-- Modal Button-->
<span class="item-delete-button">
<button class="btn btn-danger col-lg-3 col-lg-offset-3" data-toggle="modal" data-target="#@item.ID" onclick="deleteStart(this)">
        Delete
</button>
</span>

모달

<div class="modal fade" id="@item.ID" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Delete</h4> </div> <div class="modal-body"> <span style="font-size: 20px">Are you sure you want to delete Employee: @Html.DisplayFor(modelItem => item.YOUR_ITEM)?</span> </div> <div class="modal-footer"> <button type="button" onclick="deleteStopped(this)" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" onclick="deleteFunction(this)" class="btn btn-danger">Confirm Delete</button> </div> </div> </div> </div>
.

참고 : #@item.ID는 내 뷰가 내 데이터베이스에서 항목의 @model를 만들어졌습니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow