javascript - 使用 document.createElement onClick

Question

我已经完成了自己的页面，现在正尝试向其中添加一些 javascript。我想要做的是，当我点击 div 内的 p 标签时，它应该创建一个黑色 div，不透明度约为 70%，覆盖整个页面，在该层上，它应该创建一个带有一些文本的警报框，您可以关闭它，所以警报框和黑色 div 消失。到目前为止，我只是尝试创建黑色 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>