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

你问的是名为Modal Box。

Sebastian Kissling回答了一个简单的solution。但是，如果您想要更复杂的解决方案，请查看W3Schools的本指南：How TO - CSS/JS Modal。

更新：编辑了塞巴斯蒂安的回答。所以现在你可以通过点击背景来关闭消息（并转到另一个网址）。

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

像这样。

＆＃13;

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

如何使页面背景为黑色，顶部显示div消息通知

4 个答案: