将模态窗口附加到按钮并等待模态窗口关闭，然后再继续按钮操作

Question

我已将模式窗口附加到按钮。我想在单击按钮时打开模式窗口并显示一条消息。当模态窗口关闭时，继续按钮操作（打开一个新框架）。目前我看到模态窗口几秒钟，然后单击按钮打开一个新框架，我的模态消失了。

这是我的代码： 我的模态窗口 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');">

单击编辑按钮会加载另一个框架并关闭我的模态窗口。

Answer 1

您可以使用 jQuery 来trigger custom events。所以这样的事情应该可以工作：

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 点击​​处理程序之前等待弹出窗口关闭......但希望你能从这个答案中提取你需要的内容并修改它以适应你的情况。