使用document.createElement onClick

我已經完成了自己的頁面，現在正在嘗試向其中添加一些JavaScript。我想要做的是當我點擊div標籤內的ap標籤時，它應該創建一個覆蓋整個頁面並覆蓋整個頁面的不透明度爲70％的黑色div，它應該創建一個包含一些可以關閉的文本的alertbox，這樣兩個alertbox黑色的div消失了。到目前爲止，我只是試圖創建黑色的div，但它不起作用。我只想用html，css和javascript來做到這一點，而不是jQuery。使用document.createElement onClick

在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;

}

來源

2015-05-24 EmilCoder

你沒有做與你的新元素東西，所以你有什麼期待？ – adeneo

你想使用'appendChild'方法[（spec）]（https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild）添加到你的頁面。 –

@EmilCoder：您需要將創建的元素放置在某處，並將其附加到例如。文檔+你在var名稱中有一個錯字 - 應該是'backgroundDiv'。最後一件事，不要忘記，空的div有0高度，你沒有看到它。 – panther

製作一個重疊
附加一個模態
追加覆蓋到d ocument
在覆蓋的點擊（但不是模式），將其刪除
然後我們樣式覆蓋，並用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>

來源

2015-05-26 15:12:17

使用document.createElement onClick

回答

相關問題