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点击处理程序之前等待弹出窗口关闭...但希望你可以从这个答案中提取你需要的东西并根据你的情况修改它。 / p>

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

1 个答案: