我终于让我的 div 弹出消息工作了,但当我点击该链接 message()
时,我不知道如何使黑色背景 opacity:0.5;
。因此,当我单击该链接时,我希望背景变为黑色且不透明度较低+我希望弹出 div 出现。
这是我使用的代码:
function message() {
el = document.getElementById("message");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
<a href='#' onclick='message()'><img id="english" src="images/english.png"></a>
</div>
<div id="message">
<div>
<p id="messagetext">English is set to the default language.</p>
<a href='index-eng' onclick='message()' id="messagebtn">OK</a>
</div>
</div>
请您参考如下方法:
你可以这样做:
function message() {
container = document.getElementsByTagName("body")[0];
container.classList.contains("background") ? container.setAttribute("class", "") : container.setAttribute("class", "background");
el = document.getElementById("message");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
.background {
background: rgba(0, 0, 0, 0.5);
}
.msg {
visibility: hidden;
position: absolute;
top: 0;
width: 100%;
background: white
}
<body>
<a href='#' onclick='message()'><img id="english" src="images/english.png"></a>
<div id="message" class="msg">
<div>
<p id="messagetext">English is set to the default language.</p>
<a href='#' onclick='message()' id="messagebtn">OK</a>
</div>
</div>
</body>