W3學校模態示例僅適用於Chrome調試模式

-1

我正在關注創建模式的W3學校教程。當我處於調試模式並單步執行代碼時，該解決方案可以正常工作，但在不處於調試模式時不起作用。 W3和我的代碼演示之間的唯一區別是我使用JQuery庫通過Javascript在頁面加載時動態地應用HTML和CSS。我的瀏覽器是通過JS應用谷歌瀏覽器（53.0.2785.143）W3學校模態示例僅適用於Chrome調試模式

HTML：通過JS應用

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

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

來源

2016-10-21 cjpicc11

你能或許會讓這一個小提琴？它應該是一個簡單的答案，但很難說出你的JS被調用的地方，因爲我看不到實際的塊。 – rob

同意。開始創建一個小提琴我自己，但太多的管道和猜測，讓你的代碼片段功能不知道你的代碼的其餘部分。 – user1289451

我將我的代碼複製到JS Fiddle。這在JSFiddle中正常工作，它只是在我的實際解決方案中不起作用。 https://jsfiddle.net/cjpicc11/0jeamyzc/15/#&tojnjs=ADNObiMCFS – cjpicc11

按照從code.You編碼modal.style.display = 「塊」我的理解;和modal.style.display =「none」;點擊相同的ID「documentLink」。在調試模式下，你將一步一步地進行，所以模態在調試模式下很好。

試着寫關閉功能在其他跨度類似下面

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

來源

2016-10-21 19:44:52

W3學校模態示例僅適用於Chrome調試模式

回答

相關問題