如何使页面背景变黑并在顶部显示div消息通知

Question

我终于使div弹出消息起作用了，但是我不知道如何使黑色背景opacity:0.5; 当我单击该链接message() 。 因此，当我单击该链接时，我希望背景变为具有低不透明度的黑色+我希望弹出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>

Answer 1

您可以执行以下操作：

 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>

Answer 2

您要问的是所谓的“模态盒子”。

塞巴斯蒂安·基斯林（Sebastian Kissling）给出了一个很好的简单解决方案。 但是，如果您需要更复杂的解决方案，请查阅W3Schools的本指南： How to TO-CSS / JS Modal 。

更新：编辑了塞巴斯蒂安的答案。 因此，现在您可以通过单击背景关闭消息（并转到另一个URL）。

 function messageOffBg(event) { if (!document .getElementById("message") .contains(event.target)) { messageOff(); window.location.href = 'https://www.wikipedia.org/'; } } function messageOn() { document.body.setAttribute("class", "background"); document.getElementById("message").style.visibility = "visible"; setTimeout(function(){ document.addEventListener('click', messageOffBg) }, 300); } function messageOff() { document.body.setAttribute("class", ""); document.getElementById("message").style.visibility = "hidden"; document.removeEventListener('click', messageOffBg); }

 .background { background: rgba(0, 0, 0, 0.5); } .msg { visibility: hidden; position: absolute; top: 0; width: 100%; background: white }

 <body> <a href='#' onclick='messageOn()'><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='messageOff()' id="messagebtn">OK</a> </div> </div> </body>

Answer 3

尝试这个：

 function message(){ el = document.getElementById('message'); fade = document.getElementById('fadebg'); el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible"; fade.style.visibility = (fade.style.visibility == 'visible') ? 'hidden' : 'visible'; }

 #fadebg{position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.5);top:0;left:0;visibility:hidden;} #message{position:absolute;width:30%;top:20px;left:50%;margin-left:-15%;background:#fff;text-align:center;padding:10px;z-index:1;visibility:hidden;}

 <a href='#' onclick='message()'><img id="english" src="images/english.png">Click to Open</a> <div id="message"> <div> <p id="messagetext">English is set to the default language.</p> <a href='#' onclick='message()' id="messagebtn">OK</a> </div> </div> <div id="fadebg"></div>

Answer 4

像这样。

 document.getElementById("x").addEventListener("click", function(){ document.getElementsByTagName("body")[0].classList.toggle("my-class"); });

 body { transition: background-color 0.5s ease; background-color: rgba(255, 109, 0, 0.8); } .my-class { background-color: rgba(255, 109, 0, 0.2); }

 <button id="x"> press me </button>

如何使页面背景变黑并在顶部显示div消息通知

问题描述

4 个解决方案

解决方案1
1 2018-02-07 01:27:34

解决方案2
0 已采纳 2018-02-07 01:38:04

解决方案3
0 2018-02-07 02:03:15

解决方案4
0 2018-02-07 23:05:17

如何使页面背景变黑并在顶部显示div消息通知

问题描述

4 个解决方案

解决方案1 1 2018-02-07 01:27:34

解决方案2 0 已采纳 2018-02-07 01:38:04

解决方案3 0 2018-02-07 02:03:15

解决方案4 0 2018-02-07 23:05:17

解决方案1
1 2018-02-07 01:27:34

解决方案2
0 已采纳 2018-02-07 01:38:04

解决方案3
0 2018-02-07 02:03:15

解决方案4
0 2018-02-07 23:05:17