javascript - 如何将页面背景设置为黑色,顶部显示div消息通知

标签 javascript html

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

关于javascript - 如何将页面背景设置为黑色,顶部显示div消息通知,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48653825/

相关文章:

java - 如何从 div 标签属性解析 Aria-Label?

javascript - 使用 IDE 工具创建网站并在 Web 服务器上进行测试

javascript - 如何使用 CSS @font-face 设置 JavaScript 创建文本的样式

javascript - 获取警告不要在循环 jslint 中创建函数

javascript - 为每个 child 循环 jQuery

javascript - 用于搜索 href 中文本的 HTML 标记

html - 如何在整个单元格上拉伸(stretch)链接?

javascript - jquery click 不锁定 bootstrap col-md div

javascript - 我怎样才能从状态接收数据?

javascript - 错误的 CSS 滚动