Question

“删除”按钮会触发一个自定义JavaScript模式窗口，该窗口请求删除确认。如果是，则我触发对网络api的调用以进行删除。通话返回后，我想显示另一个模式窗口以显示“成功删除”消息。然后，我想转到另一个视图。

问题是，在显示我的第二个模态之前，它正在转到另一个视图。为什么？

我以这个为例：https://learnersbucket.com/examples/bootstrap4/custom-confirm-box-with-bootstrap/

<script type="text/javascript">

The 1st modal:

function ConfirmDeleteProfile(handler) {
    $(`<div class="modal fade" id="myModal1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-body" style="padding:10px;">
               <h4 class="text-center">Are you sure you want to delete your profile ?</h4>
               <div class="text-center">
                   <a class="btn btn-info btn-yes1">Yes</a>
                   <a class="btn btn-default btn-no1">No</a>
                </div>
             </div>
         </div>
       </div>
    </div>`).appendTo('body');

    $("#myModal1").modal({
        backdrop: 'static',
        keyboard: false
    });

    $(".btn-yes1").click(function () {
        $("#myModal1").modal("hide");

        var url = '@Url.Content("~/")' + "UserProfile/DeleteUserProfile";

        $.post(url, function (data) {
            if (data) {
               var returnStatus = false;

               // Show another modal.
               returnStatus = ConfirmSuccessfulDelete();

               // Goes to another view.
               var url2 = '@Url.Content("~/")' + "Home/Index";
               window.location.href = url2;

               handler(true);
            }
            else {
                alert("Something went wrong with the delete!");
                return false;
            }
        });
    });

    $(".btn-no1").click(function () {
        handler(false);
        $("#myModal1").modal("hide");
    });

    $("#myModal1").on('hidden.bs.modal', function () {
        $("#myModal1").remove();
    });
}

    The 2nd modal:

    function ConfirmSuccessfulDelete(handler) {
    $(`<div class="modal fade" id="myModal5" role="dialog">
        <div class="modal-dialog">
             <div class="modal-content">
               <div class="modal-body" style="padding:10px;">
               <h4 class="text-center">Your Profile Has Been Deleted Successfully.</h4>
               </br>
               <h4 class="text-center">You can always recreate it if you are so inclined.</h4>
               <div class="text-center">
                   <a class="btn btn-info btn-ok5">OK</a>
                </div>
             </div>
         </div>
       </div>
    </div>`).appendTo('body');

    // Trigger the modal.
    $("#myModal5").modal({
        backdrop: 'static',
        keyboard: false
    });

    $(".btn-ok5").click(function () {
        handler(true);
        $("#myModal5").modal("hide");
    });

    $("#myModal5").on('hidden.bs.modal', function () {
        $("#myModal5").remove();
    });
}
</script>

我有一个带有警报的测试版本。出现警报，然后出现第二个模式窗口。

再次为什么？

    function ConfirmDeleteProfile(handler) {
    $(`<div class="modal fade" id="myModal1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-body" style="padding:10px;">
               <h4 class="text-center">Are you sure you want to delete your profile ?</h4>
               <div class="text-center">
                   <a class="btn btn-info btn-yes1">Yes</a>
                   <a class="btn btn-default btn-no1">No</a>
                </div>
             </div>
         </div>
       </div>
    </div>`).appendTo('body');

    $("#myModal1").modal({
        backdrop: 'static',
        keyboard: false
    });

    $(".btn-yes1").click(function () {
        $("#myModal1").modal("hide");

        var url = '@Url.Content("~/")' + "UserProfile/DeleteUserProfile";

        $.post(url, function (data) {
            if (data) {
                var returnStatus = false;
                returnStatus = ConfirmSuccessfulDelete();

                if (returnStatus == true) {
                   alert('true')
                }
                else {
                   alert('false')
                }

                handler(true);
            }
            else {
                alert("Something went wrong with the delete!");
                return false;
            }
        });
    });

    // Pass false to callback function.
    $(".btn-no1").click(function () {
        handler(false);
        $("#myModal1").modal("hide");
    });

    // Remove the modal once it is closed.
    $("#myModal1").on('hidden.bs.modal', function () {
        $("#myModal1").remove();
    });
}

Answer 1

在ConfirmDeleteProfile（handler）中，我刚刚添加：ConfirmSuccessfulDelete（（ans）=> {if（ans）{var url2 ='@ Url.Content（“〜/”）'+“ Home / Index”;窗口.location.href = url2;}其他{alert（'Error'）}}）;

自定义JavaScript模式窗口未按预期显示

1 个答案: