javascript - 如何从另一个模态框回调一个模态框？

Question

我正在编写一个应用程序，该应用程序在许多元素之间传递一个模式。它有一个 id 和类，我只根据用户选择的列表项更改模式中的 View 项。但是，我在模式中有一个“删除”按钮，每当用户选择它时，就会弹出另一个按钮，他们必须选择"is"或“否”进行确认。不过，如果他们选择"is"，我想恢复到第一个模式并停止或禁止他们再次单击“删除”。 我想出了一个解决方案，但它锁定了所有模式的“删除”按钮，而不仅仅是我选择的按钮。所以我的目标是找到一种方法来引用我启动它的前一个模式。

HTML:

    <div class="myForm">
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Update or
                            Create</h5>
                        <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-form-label">Application Name:</label> <input
                                type="text" class="form-control" id="displayAppName"
                                name="displayAppName" value="" readonly /> <label
                                class="col-form-label">Application Code:</label> <input
                                type="text" class="form-control" id="appcode" name="appcode"
                                value="" readonly /> <label class="col-form-label"> Map
                                Status:</label> <input type="text" class="form-control" id="mapStatus"
                                name="mapStatus" value="" readonly /> <label
                                class="col-form-label">Edit Status:</label> <input type="text"
                                class="form-control" id="editStatus" name="editStatus" value=""
                                readonly />


                        </div>
                    </div>
                    <div class="modal-footer" id="dashboardModalFooter">
                        <button type="button" class="btn btn-danger" id="deleteGPBtn">Delete</button>

                        <button type="button" class="btn btn-secondary"
                            id="dashboardCloseModal" data-dismiss="modal">Close</button>

                        <a id="modalCreateBtn"> <input type="submit"
                            class="btn btn-primary modal-create" id="createBtn"

                            value="Create" /></a>

                    </div>
                </div>
            </div>
        </div>
    </div>





    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog"
        aria-labelledby="basicModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">Delete Grouping
                        Pattern</h4>
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger" role="alert">Are you sure you
                        want to delete?</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="deleteGPYes">Yes</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                </div>
            </div>
        </div>
    </div>

jQuery:

            $("#deleteGPBtn").on("click", function(event){


                $("#exampleModal").modal('hide');   //Hides current modal with delete button
                $('#deleteModal').modal('show');    //Displays the are you "sure" modal



            });




            $('#deleteGPYes').on('click',function(){
                //If they select "Yes" I want to somehow disable the button for this specific modal.
                //However, I need to somehow refrence back one modal which I don't know how
                $('#deleteModal').modal('hide');

            });

因此，一旦他们选择#deleteGPBtn，他们就必须选择#deleteGPYes才能禁用与该列表项关联的“删除”按钮。

P.S - 我尝试使用 jQuery 的 find() 或 children() 但我无法让它工作。

Answer 1

禁用该按钮应该不是问题，因为 id 是唯一的。

您可以在data attribute上设置当前模式的id关于新模式。

$("#deleteGPBtn").on("click", function(event) {
  $("#exampleModal").modal('hide'); //Hides current modal with delete button

  // Save calling modal
  $('#deleteModal').data('callback-modal', $('#exampleModal'))
    .modal('show'); //Displays the are you "sure" modal
});


$('#deleteGPYes').on('click', function() {
  //If they select "Yes" I want to somehow disable the button for this specific modal.
  //However, I need to somehow refrence back one modal which I don't know how

  // Read the data attribute
  let $returnTo = $('#deleteModal').data('callback-modal');
  // Limit the button search
  $('#deleteGPBtn', $returnTo).prop('disabled', true);
  $('#deleteModal').modal('hide');
  // Show old modal
  $returnTo.modal('show');
  // Cleanup
  $('#deleteModal').removeData('callback-modal');
});