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');">

单击编辑按钮加载另一个帧并关闭我的模式窗口。

您可以使用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点击处理程序。。。但希望您能从这个答案中提取您需要的内容，并根据您的情况进行修改。

谢谢您的答案，不幸的是，它不起作用。其思想是使用模态窗口，例如警报功能工作。警报功能将停止，等待用户单击“确定”，然后继续。我想用一个模态窗口相同。主要的问题是，我正在操作一个按钮，我无法访问代码及其功能。是的，但您没有使用警报或输入。这两个功能都由浏览器实现，在等待用户时可以阻止所有页面交互。你无法通过自定义弹出窗口来实现这一点，因此你必须将该功能分解为两部分来实现。谢谢，我尝试了你的建议，但我无法使其工作。我也尝试过preventDefault和ReturnFalse，但按钮一直在执行onclick操作…老实说，我不完全理解您的设计，所以我的建议很可能有缺陷。。。我只是从表面上看了你的评论。您需要将其视为一系列独立的步骤，而不是单一的代码流。在JavaScript中，您不能完全停留在这里。。。但是你可以做一些事情，比如挂断这个，我会回来回应另一个事件，等等。我正在为一个网站引擎做一个插件项目，类似于Facebook。以Facebook为例。我想创建一个Chrome插件，安装后，当我点击，比如说Messenger按钮时，它将产生一个模式窗口。简而言之，我安装插件->我点击Messenger按钮->Messenger加载暂停->出现模式窗口->我关闭模式窗口->Messenger加载恢复。