Question

我已经完成了自己的页面，现在正尝试添加一些javascript。我想要做的是当我点击div内的ap标签时，它应该创建一个黑色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

制作叠加层
附加模态
将叠加层附加到文档
点击叠加层（但不是模态），将其删除
然后我们使用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>

在onClick上使用document.createElement

1 个答案: