无法使用 javascript 使窗口淡出或在 css 中添加过渡效果

Question

fadeOut为了在关闭窗口弹出消息时添加效果，我一直在使用该功能时遇到问题。同时，我尝试在 CSS 中为 div 添加过渡效果，但也没有成功。我的想法是将这种淡化效果添加到ifJavaScript 部分的语句中，但这不起作用。.window {  position: fixed;  border-width: 0px;  top: 0;  right: 0;  left: 0;  bottom: 0;  margin: auto;  padding: 0px;  background: url(images/blue-abstract-noise-free-website-background-image.jpg);  border-radius: 12px;  width: 476px;  height: 276px;  opacity: 1;  z-index: 1;  box-shadow: 2px 1px 2.82px 1.8px rgba(209, 55, 55, 0.486), 0px 3px 5.88px 0.12px rgba(211, 49, 49, 0.514);}.layover {  background-color: rgba(100, 99, 92, 0.699);  position: absolute;  right: 0px;  top: 0px;  width: 100%;  height: 100%;  border-radius: 12px;}.h2 {  position: absolute;  left: 12px;  font-weight: 900;  font-size: 20px;  color: white;  font-family: sans-serif;}.yesandno {  height: 80px;  width: 250px;  position: absolute;  top: 200px;  left: 217px;}.yes {  display: inline-block;  position: absolute;  height: 30px;  width: 80px;  margin: 0px;  left: 100px;}.yes>button {  display: block;  cursor: pointer;  margin: 0px;  padding: 0px;  border: 0px;  border-radius: 8px;  height: 100%;  width: 100%;  color: white;  font-weight: 900;  font-size: 13px;  font-family: sans-serif;  opacity: 1;  z-index: 2;  background-color: rgba(129, 127, 127, 0.808);}.no {  display: inline-block;  position: absolute;  height: 30px;  width: 80px;  margin: 0px;  right: 300px;}.no>button {  display: block;  cursor: pointer;  margin: 0px;  padding: 0px;  border: 0px;  border-radius: 8px;  height: 100%;  width: 100%;  color: white;  font-weight: 900;  font-size: 13px;  font-family: sans-serif;  opacity: 1;  z-index: 2;  background-color: rgba(129, 127, 127, 0.808);}.langmessage {  position: absolute;  top: 80px;  text-align: center;  font-weight: 900;  font-size: 13px;  font-family: sans-serif;  color: white;  left: 10px;  right: 10px;}

Answer 1

为了使用该fadeOut()方法，您必须将其包含jQuery到您的项目中，但您也可以使用纯 JavaScript 自己手动对其进行编程。以下是两种解决方案，一种使用jQuery，另一种使用 plain javascript。

jQuery解决方案：

注意：如果使用jQuery，您可以将部分代码重写document.getElementById("win")为 just$("#win")等，但这超出了问题的范围。

var lang = navigator.language;

if ("" + lang == "es-US") {

  var div = document.getElementById("win");

}

var buttonn = document.getElementById("buttonn");

buttonn.onclick = function() {

  var div = document.getElementById("win");

  if (div.style.display !== "none") {

    $("#win").fadeOut();

  }

}

.window {

  position: fixed;

  border-width: 0px;

  top: 0;

  right: 0;

  left: 0;

  bottom: 0;

  margin: auto;

  padding: 0px;

  background: url(images/blue-abstract-noise-free-website-background-image.jpg);

  border-radius: 12px;

  width: 476px;

  height: 276px;

  opacity: 1;

  z-index: 1;

  box-shadow: 2px 1px 2.82px 1.8px rgba(209, 55, 55, 0.486), 0px 3px 5.88px 0.12px rgba(211, 49, 49, 0.514);

}

.layover {

  background-color: rgba(100, 99, 92, 0.699);

  position: absolute;

  right: 0px;

  top: 0px;

  width: 100%;

  height: 100%;

  border-radius: 12px;

}

.h2 {

  position: absolute;

  left: 12px;

  font-weight: 900;

  font-size: 20px;

  color: white;

  font-family: sans-serif;

}

.yesandno {

  height: 80px;

  width: 250px;

  position: absolute;

  top: 200px;

  left: 217px;

}

.yes {

  display: inline-block;

  position: absolute;

  height: 30px;

  width: 80px;

  margin: 0px;

  left: 100px;

}

.yes>button {

  display: block;

  cursor: pointer;

  margin: 0px;

  padding: 0px;

  border: 0px;

  border-radius: 8px;

  height: 100%;

  width: 100%;

  color: white;

  font-weight: 900;

  font-size: 13px;

  font-family: sans-serif;

  opacity: 1;

  z-index: 2;

  background-color: rgba(129, 127, 127, 0.808);

}

.no {

  display: inline-block;

  position: absolute;

  height: 30px;

  width: 80px;

  margin: 0px;

  right: 300px;

}

.no>button {

  display: block;

  cursor: pointer;

  margin: 0px;

  padding: 0px;

  border: 0px;

  border-radius: 8px;

  height: 100%;

  width: 100%;

  color: white;

  font-weight: 900;

  font-size: 13px;

  font-family: sans-serif;

  opacity: 1;

  z-index: 2;

  background-color: rgba(129, 127, 127, 0.808);

}

.langmessage {

  position: absolute;

  top: 80px;

  text-align: center;

  font-weight: 900;

  font-size: 13px;

  font-family: sans-serif;

  color: white;

  left: 10px;

  right: 10px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

  <div class="window" id="win">

    <div class="layover">

      <div class="h2">

        <h2>Oops!</h2>

      </div>

      <div class="yesandno">

        <figure class="yes">

          <button onclick="window.location.href= 'espanol.html';">Si</button>

        </figure>

        <figure class="no">

          <button onclick id="buttonn">No</button>

        </figure>

      </div>

      <div class="langmessage">

        Hemos detectado que el idioma de su ordenador se encuentra en español. ¿Le gustaría utilizar la versión en español de nuestro sitio web?

      </div>

    </div>

  </div>

</div>

香草 JavaScript 解决方案：

var lang = navigator.language;

if ("" + lang == "es-US") {

  var div = document.getElementById("win");

}

var buttonn = document.getElementById("buttonn");

buttonn.onclick = function() {

  var div = document.getElementById("win");

  if (div.style.display !== "none") {

    fadeOutPopup();

  }

}

    

function fadeOutPopup() {

  var elem = document.getElementById("win");

  var fade = setInterval(function () {

      if (!elem.style.opacity) {

          elem.style.opacity = 1;

      }

      if (elem.style.opacity > 0) {

          elem.style.opacity -= 0.2;

      } else {

          clearInterval(fade);

      }

  }, 50);

}

.window {

  position: fixed;

  border-width: 0px;

  top: 0;

  right: 0;

  left: 0;

  bottom: 0;

  margin: auto;

  padding: 0px;

  background: url(images/blue-abstract-noise-free-website-background-image.jpg);

  border-radius: 12px;

  width: 476px;

  height: 276px;

  opacity: 1;

  z-index: 1;

  box-shadow: 2px 1px 2.82px 1.8px rgba(209, 55, 55, 0.486), 0px 3px 5.88px 0.12px rgba(211, 49, 49, 0.514);

}

.layover {

  background-color: rgba(100, 99, 92, 0.699);

  position: absolute;

  right: 0px;

  top: 0px;

  width: 100%;

  height: 100%;

  border-radius: 12px;

}

.h2 {

  position: absolute;

  left: 12px;

  font-weight: 900;

  font-size: 20px;

  color: white;

  font-family: sans-serif;

}

.yesandno {

  height: 80px;

  width: 250px;

  position: absolute;

  top: 200px;

  left: 217px;

}

.yes {

  display: inline-block;

  position: absolute;

  height: 30px;

  width: 80px;

  margin: 0px;

  left: 100px;

}

.yes>button {

  display: block;

  cursor: pointer;

  margin: 0px;

  padding: 0px;

  border: 0px;

  border-radius: 8px;

  height: 100%;

  width: 100%;

  color: white;

  font-weight: 900;

  font-size: 13px;

  font-family: sans-serif;

  opacity: 1;

  z-index: 2;

  background-color: rgba(129, 127, 127, 0.808);

}

.no {

  display: inline-block;

  position: absolute;

  height: 30px;

  width: 80px;

  margin: 0px;

  right: 300px;

}

.no>button {

  display: block;

  cursor: pointer;

  margin: 0px;

  padding: 0px;

  border: 0px;

  border-radius: 8px;

  height: 100%;

  width: 100%;

  color: white;

  font-weight: 900;

  font-size: 13px;

  font-family: sans-serif;

  opacity: 1;

  z-index: 2;

  background-color: rgba(129, 127, 127, 0.808);

}

.langmessage {

  position: absolute;

  top: 80px;

  text-align: center;

  font-weight: 900;

  font-size: 13px;

  font-family: sans-serif;

  color: white;

  left: 10px;

  right: 10px;

}

<div class="container">

  <div class="window" id="win">

    <div class="layover">

      <div class="h2">

        <h2>Oops!</h2>

      </div>

      <div class="yesandno">

        <figure class="yes">

          <button onclick="window.location.href= 'espanol.html';">Si</button>

        </figure>

        <figure class="no">

          <button onclick id="buttonn">No</button>

        </figure>

      </div>

      <div class="langmessage">

        Hemos detectado que el idioma de su ordenador se encuentra en español. ¿Le gustaría utilizar la versión en español de nuestro sitio web?

      </div>

    </div>

  </div>

</div>