使用document.createElement onClick
使用document.createElement onClick
提问于 2015-05-25 00:25:17
我已经完成了我自己的页面，现在正在尝试添加一些javascript。我想要做的是，当我点击div中的一个p标签时，它应该会创建一个透明度约为70%的黑色div，覆盖整个页面，并在该层上创建一个alertbox，其中包含一些您可以关闭的文本，这样alertbox和黑色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;}
回答 1
Stack Overflow用户
发布于 2015-05-26 23:12:17
- Create an overlay
- Append a modal
- 单击覆盖图(但不是modal)时，将覆盖图追加到文档
- ，删除它<
>H19然后我们使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30425711
复制相关文章
相似问题
腾讯云开发者
