>

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

내 코드는 다음과 같습니다.  내 모달 창 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');">

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


  • 답변 # 1

    jQuery를 사용하여 사용자 정의 이벤트를 트리거 할 수 있습니다. 따라서 다음과 같이 작동해야합니다.

    let closeButton = popUpInstructionHTML.contents().find(".close").first();
    editButton.on("click", function () { // just for testing bound it to the Edit button
        popUpInstructionHTML.show();
        // at some point you are going to call:
        // popUpInstructionHTML.trigger("finished");
    });
    popUpInstructionHTML.on("finished", function(){
        // When the user clicks on <span> (x), close the modal
        $(closeButton).on("click", function() {
            popUpInstructionHTML.hide();
        });
    })
    
    

    closeButton 클릭 핸들러를 연결하기 전에 팝업이 닫히기를 기다리는 이유를 잘 모르지만이 답변에서 필요한 것을 추출하여 상황에 맞게 수정할 수 있기를 바랍니다.

관련 자료

  • 이전 yaml - Ansible 모듈 옵션의 일부로 Jinja2 dict 사용
  • 다음 javascript - Lodash _ 노드없이 Lodash를 사용할 때 정의되지 않습니까?