使用document.createElement onClick

Question

我已經完成了自己的頁面，現在正在嘗試向其中添加一些JavaScript。 我想做的是，當我單擊div內的ap標簽時，它應該創建一個不透明度為70％的黑色div，它覆蓋了整個頁面，並且在該層上，它應該創建一個帶有一些可以關閉的文本的警報框，因此這兩個警報框都可以和黑色div消失了。 到目前為止，我只是嘗試創建black div，但它不起作用。 我只想用html，css和javascript而不是jquery來做到這一點。

在HTML中：

 <div class="varuhus">
     <p onclick="varuhusAlmhult()">Älmhult</p>
     <p onclick="varuhusStockholm()">Stockholm</p>
     <p onclick="varuhusMalmo()">Malmö</p>
 </div>

在javascript（已編輯）中：

function varuhusAlmhult() {
var backgroundDiv = document.createElement("DIV");
document.body.appendChild(backgroundDiv);
backgroundDiv.style.width = "100%"
backgroundDiv.style.height = "100%"
backgroundDiv.style.backgroundColor = 'black';
backgroundDiv.style.opacity = .7;

}

Answer 1

1. 創建一個覆蓋
2. 附加模態
3. 將疊加層附加到文檔
4. 單擊疊加層（而不是模態）后，將其刪除
5. 然后我們用CSS設置疊加層和模態的樣式

如果願意，您可以添加更多邏輯來插入關閉按鈕

 function varuhusAlmhult() { var overlay = document.createElement("DIV"); overlay.className = 'overlay'; overlay.onclick = function() { overlay.remove(); } var modal = document.createElement("DIV"); modal.className = 'modal'; modal.innerHTML = 'A bunch of text'; overlay.appendChild(modal); document.body.appendChild(overlay); } 

 html, body { padding: 0px; margin: 0px; height: 100%; } .overlay { background: rgba(0,0,0,0.7); position: fixed; top: 0; left: 0; right: 0; bottom: 0; font-size: 0; white-space: nowrap; text-align: center; } .overlay::before { content: ""; height: 100%; } .overlay::before, .modal { display: inline-block; vertical-align: middle; font-size: 1rem; white-space: initial; text-align: left; margin: 0 auto; } .modal { background: #FFF; border-radius: 5px; height: 80%; width: 80%; box-shadow: 0px 5px 15px -5px black; } 

 <p onclick="varuhusAlmhult()">Älmhult</p>