W3学校模式的例子只在Chrome调试模式下工作

W3 Schools Modal Example only working on Chrome Debug mode

本文关键字：模式 Chrome 调试 工作 学校 W3      更新时间：2023-09-26

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

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

CSS应用于JS:

$(".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

根据我对你代码的理解。你的代码是modal.style.display = "block";和modal.style.display = "none";点击相同ID的"documentLink"。在调试模式下，你将一步一步地前进，所以modal在调试模式下会很好地出现。

尝试在其他span中编写close function，例如下面

 btn.onclick = function() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
相关文章：