Question

我正在关注创建模态的W3学校教程。当我处于调试模式并逐步执行代码时，该解决方案正常工作，但在不处于调试模式时它无法正常工作。 W3和我的代码的演示之间的唯一区别是我使用JQuery库通过Javascript动态地在页面加载上应用HTML和CSS。我的浏览器是Google Chrome（53.0.2785.143）

通过JS应用的HTML：

sHTML += '<div id="myModal" class="modal">';
sHTML += '<div class="modal-content"><p>some text in modal</p></div>';
sHTML += '</div>';
$("Body").append( sHTML );

通过JS应用的CSS：

$(".modal").css({"display":"none","position":"fixed","z-index":"1","padding-top":"100px","left":"0","top":"0","width":"100%","height":"100%","overflow":"auto","background-color":"rgb(0,0,0)","background-color":"rgba(0,0,0,0.4)"});

模态操作：

$("#documentLink").on('click', function() {
    var modal = document.getElementById('myModal');
    modal.style.display = "block";

    //processing logic...

    //processing finished.

    modal.style.display = "none";
});

W3链接到示例： http://www.w3schools.com/howto/howto_css_modals.asp

Answer 1

根据我对你的代码的理解。你编码modal.style.display =“block”;和modal.style.display =“none”;点击相同的ID“documentLink”。在调试模式下，您将逐步进行，因此模态在调试模式下正常运行。

尝试在下面的其他范围内编写close函数

 btn.onclick = function() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}

W3 Schools Modal示例仅适用于Chrome调试模式

1 个答案: