Блог

У меня есть общий модал начальной загрузки, который используется для подтверждения действий пользователей, прежде чем приступить к другому действию:

 <script>
    $(document).ready(function (e) {
        $('#confirm-popup-modal').on('show.bs.modal', function () {
            $("#confirm-modal").val("false");
        });
        $('#confirm-popup-modal-yes').off("click").on("click", function (e) {
            e.preventDefault();
            $("#confirm-modal").val("true");
            $('#confirm-popup-modal').modal('hide').data('bs.modal', null);
            return false;
        });
    });
</script>
<input type="hidden" id="confirm-modal" value="false" />
<div id="confirm-popup-modal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="col-sm-12">
                <div class="modal-header">
                    <div class="row">
                        <div class="col-sm-12">
                            <h5 class="modal-title">Confirm Details</h5>
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <br />
                    <div class="row">
                        <div class="col-sm-12">
                            <span>
                                <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                                Are you sure you want to proceed with this action?
                            </span>
                        </div>
                    </div>
                    <br />
                </div>
                <div class="model-footer">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <div class="clearfix">
                                    <div class="pull-right">
                                        <button id="confirm-popup-modal-yes" class="btn btn-primary">Yes</button>
                                        <a href="#" id="confirm-popup-modal-no" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 

Вот как я это называю:

 $("#removeRole").off("click").on("click", function (e) {
    selected = table.rows('.selected').data().toArray();
    if (selected.length > 0) {
        $("#confirm-popup-modal").modal("show");
        e.stopPropagation();
        $("#confirm-popup-modal").on('hidden.bs.modal', function (e) {
            if ($("#confirm-modal").val() == "true") {
                var form_data = selected;
                $.ajax({
                    url: "@Url.Action("Remove", "ApplicationRole", new { area = "Configuration" })",
                    method: "POST",
                    data: JSON.stringify(form_data),
                    contentType: "application/json",
                    success: function (result) {
                        table.draw();
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            }
        });
    }
    return false;
});
 

Это еще одна функция на той же странице, которая должна проверить, закрыта ли модальная функция.

 $("#confirm-popup-modal").on('hidden.bs.modal', function (e) {
    if ($("#confirm-modal").val() == "true") {
        $.ajax({
            url: "@Url.Action("Delete", "ApplicationRepository", new { area = "Configuration" })",
            method: "POST",
            data: JSON.stringify($("#SelectedId").val()),
            contentType: "application/json",
            success: function (result) {
                toastr.success("Repository has been deleted");
                $("#SelectedPath").val("\");
                $("#SelectedId").val("");
                $('#tree').jstree(true).refresh();
            },
            error: function (error) {
                console.log(error);
            }
        });
    }
});
 

Я не понимал, что «скрытый.bs.модальный» применяется ко всей странице, и когда мой модальный закрывается, из-за этого активируются несколько URL-адресов.

Есть ли способ определить, был ли модал закрыт, но ограничить его моей текущей функцией?