Question

第一次使用模态并且我的淡入淡出效果不正常时，它会在取消时消失，但在确认删除后不会消失。

这是我的模态w /按钮

<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)">
            <span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete
        </button>
            </span>

  <!-- Modal -->
  <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">&times;</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.Name)?</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>

这是我的所有JQuery

function deleteStart(element) {
        $(element).closest("table").toggleClass("table-hover");
        $(element).closest("tr").css('background-color', 'red');
    }

    function deleteStopped(element) {
        $(element).closest("table").toggleClass("table-hover");
        $(element).closest("tr").css('background-color', 'initial');
    }

    function deleteFunction(element) {
        var newID = $(element).closest("td").find("span.ID").text();

                $.post(
            '@Url.Action("customDelete", "Employee")',
            {
                'id': newID
            },
            function (data) { },
            "json"
            );
                $(element).closest("tr").next("tr").remove();
                $(element).closest("tr").remove();             

                $(element).closest("table").toggleClass("table-hover");
                $(element).closest("tr").css('background-color', 'initial');
                $('.modal').modal('hide');     
    }

任何帮助表示赞赏！

编辑：我尝试添加$('.modal').modal('hide');，但这似乎没有帮助，我是否错误地引用了它？

Answer 1

找到问题！

如果你尝试hide临时离开View的函数中的模态（例如AJAX），那么你必须在此之前结束模态的脚本，否则它们会在应用程序中丢失，因此你不能{ {1}}它。

要做到这一点，你必须在你的函数中立即调用以下内容，然后在我的情况下调用任何其他函数/方法，如AJAX Post。

这摆脱了hide然后fade它。

hides

Answer 2

执行删除后，您似乎没有隐藏模态。

在deleteFunction（）的底部添加$（'。modal'）。modal（'hide'）;这将手动关闭你的模态。

请参阅http://getbootstrap.com/javascript/#modals

调用.modal（'hide'）后模态不会消失

2 个答案: