javascript - 모달 창을 버튼에 연결하고 버튼 동작을 계속하기 전에 모달 창이 닫힐 때까지 기다리십시오

모달 창을 버튼에 첨부했습니다. 버튼을 클릭하면 메시지와 함께 열리는 모달 창을 원합니다. 모달 창이 닫히면 버튼 동작을 계속하십시오 (새 프레임 열기). 현재 몇 초 동안 모달 창이 나타나면 버튼 클릭으로 새 프레임이 열리고 모달이 사라집니다.

내 코드는 다음과 같습니다.  내 모달 창 CSS + HTML

   <style>
/* The Modal (background) */
.modal {
    display: visible; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

</style>

<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>

내 JS 의사 코드 :

.....
let popUpInstruction = require("!text-loader!./Instructions.html");
let editButton = frame.contents().find('input[name$="edit"]'); // just for testing bound it to the Edit button
....
if ( someStatement) {
let place = frame.contents().find(".headerContent");
let popUpInstructionHTML = $($.parseHTML(popUpInstruction));
popUpInstructionHTML.appendTo(place);
let closeButton = popUpInstructionHTML.contents().find(".close")[0];
               editButton.on("click", function () { // just for testing bound it to the Edit button
                        popUpInstructionHTML.show();
//how to make the code to stop here and wait for popUpInstructionHTML to be closed , brefore continue with the editButton action ?

                        // When the user clicks on <span> (x), close the modal
                        $(closeButton).on("click", function() {
                            popUpInstructionHTML.hide();
                        });
                });
}

여기 내 버튼이 있습니다 :

<input value=" Edit " class="btn" name="edit" title="Edit" type="button" onclick="navigateToUrl('url','DETAIL','edit');">

편집 버튼을 클릭하면 다른 프레임이로드되고 모달 창이 닫힙니다.