如何使页面背景黑色带有DIV消息通知

我终于使我的div弹出消息正常工作，但是当我单击该链接message()时，我不知道如何制作黑色背景opacity:0.5;。因此，当我单击该链接时，我希望背景变成黑色，而不透明度低我希望弹出窗口出现。

这是我使用的代码：

 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>

您要问的称为模态框。

塞巴斯蒂安亲吻通过一个很好的简单解决方案回答。但是，如果您需要更复杂的解决方案，请检查W3Schools：如何-CSS/JS模态的此指南。

更新：编辑了塞巴斯蒂安的答案。因此，现在您可以通过单击背景来关闭消息(然后转到另一个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>

尝试以下：

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>

这样。

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>

相关内容

最新更新

热门标签：