我终于让我的 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>


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!