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

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;

}


三国纷争
浏览 121回答 1
1回答

神不在的星期二

为了使用该fadeOut()方法,您必须将其包含jQuery到您的项目中,但您也可以使用纯 JavaScript 自己手动对其进行编程。以下是两种解决方案,一种使用jQuery,另一种使用 plain javascript。jQuery解决方案:注意:如果使用jQuery,您可以将部分代码重写document.getElementById("win")为 just$("#win")等,但这超出了问题的范围。var lang = navigator.language;if ("" + lang == "es-US") {&nbsp; var div = document.getElementById("win");}var buttonn = document.getElementById("buttonn");buttonn.onclick = function() {&nbsp; var div = document.getElementById("win");&nbsp; if (div.style.display !== "none") {&nbsp; &nbsp; $("#win").fadeOut();&nbsp; }}.window {&nbsp; position: fixed;&nbsp; border-width: 0px;&nbsp; top: 0;&nbsp; right: 0;&nbsp; left: 0;&nbsp; bottom: 0;&nbsp; margin: auto;&nbsp; padding: 0px;&nbsp; background: url(images/blue-abstract-noise-free-website-background-image.jpg);&nbsp; border-radius: 12px;&nbsp; width: 476px;&nbsp; height: 276px;&nbsp; opacity: 1;&nbsp; z-index: 1;&nbsp; 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 {&nbsp; background-color: rgba(100, 99, 92, 0.699);&nbsp; position: absolute;&nbsp; right: 0px;&nbsp; top: 0px;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; border-radius: 12px;}.h2 {&nbsp; position: absolute;&nbsp; left: 12px;&nbsp; font-weight: 900;&nbsp; font-size: 20px;&nbsp; color: white;&nbsp; font-family: sans-serif;}.yesandno {&nbsp; height: 80px;&nbsp; width: 250px;&nbsp; position: absolute;&nbsp; top: 200px;&nbsp; left: 217px;}.yes {&nbsp; display: inline-block;&nbsp; position: absolute;&nbsp; height: 30px;&nbsp; width: 80px;&nbsp; margin: 0px;&nbsp; left: 100px;}.yes>button {&nbsp; display: block;&nbsp; cursor: pointer;&nbsp; margin: 0px;&nbsp; padding: 0px;&nbsp; border: 0px;&nbsp; border-radius: 8px;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; color: white;&nbsp; font-weight: 900;&nbsp; font-size: 13px;&nbsp; font-family: sans-serif;&nbsp; opacity: 1;&nbsp; z-index: 2;&nbsp; background-color: rgba(129, 127, 127, 0.808);}.no {&nbsp; display: inline-block;&nbsp; position: absolute;&nbsp; height: 30px;&nbsp; width: 80px;&nbsp; margin: 0px;&nbsp; right: 300px;}.no>button {&nbsp; display: block;&nbsp; cursor: pointer;&nbsp; margin: 0px;&nbsp; padding: 0px;&nbsp; border: 0px;&nbsp; border-radius: 8px;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; color: white;&nbsp; font-weight: 900;&nbsp; font-size: 13px;&nbsp; font-family: sans-serif;&nbsp; opacity: 1;&nbsp; z-index: 2;&nbsp; background-color: rgba(129, 127, 127, 0.808);}.langmessage {&nbsp; position: absolute;&nbsp; top: 80px;&nbsp; text-align: center;&nbsp; font-weight: 900;&nbsp; font-size: 13px;&nbsp; font-family: sans-serif;&nbsp; color: white;&nbsp; left: 10px;&nbsp; right: 10px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container">&nbsp; <div class="window" id="win">&nbsp; &nbsp; <div class="layover">&nbsp; &nbsp; &nbsp; <div class="h2">&nbsp; &nbsp; &nbsp; &nbsp; <h2>Oops!</h2>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="yesandno">&nbsp; &nbsp; &nbsp; &nbsp; <figure class="yes">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onclick="window.location.href= 'espanol.html';">Si</button>&nbsp; &nbsp; &nbsp; &nbsp; </figure>&nbsp; &nbsp; &nbsp; &nbsp; <figure class="no">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onclick id="buttonn">No</button>&nbsp; &nbsp; &nbsp; &nbsp; </figure>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="langmessage">&nbsp; &nbsp; &nbsp; &nbsp; 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?&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>香草 JavaScript 解决方案:var lang = navigator.language;if ("" + lang == "es-US") {&nbsp; var div = document.getElementById("win");}var buttonn = document.getElementById("buttonn");buttonn.onclick = function() {&nbsp; var div = document.getElementById("win");&nbsp; if (div.style.display !== "none") {&nbsp; &nbsp; fadeOutPopup();&nbsp; }}&nbsp; &nbsp;&nbsp;function fadeOutPopup() {&nbsp; var elem = document.getElementById("win");&nbsp; var fade = setInterval(function () {&nbsp; &nbsp; &nbsp; if (!elem.style.opacity) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elem.style.opacity = 1;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if (elem.style.opacity > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elem.style.opacity -= 0.2;&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearInterval(fade);&nbsp; &nbsp; &nbsp; }&nbsp; }, 50);}.window {&nbsp; position: fixed;&nbsp; border-width: 0px;&nbsp; top: 0;&nbsp; right: 0;&nbsp; left: 0;&nbsp; bottom: 0;&nbsp; margin: auto;&nbsp; padding: 0px;&nbsp; background: url(images/blue-abstract-noise-free-website-background-image.jpg);&nbsp; border-radius: 12px;&nbsp; width: 476px;&nbsp; height: 276px;&nbsp; opacity: 1;&nbsp; z-index: 1;&nbsp; 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 {&nbsp; background-color: rgba(100, 99, 92, 0.699);&nbsp; position: absolute;&nbsp; right: 0px;&nbsp; top: 0px;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; border-radius: 12px;}.h2 {&nbsp; position: absolute;&nbsp; left: 12px;&nbsp; font-weight: 900;&nbsp; font-size: 20px;&nbsp; color: white;&nbsp; font-family: sans-serif;}.yesandno {&nbsp; height: 80px;&nbsp; width: 250px;&nbsp; position: absolute;&nbsp; top: 200px;&nbsp; left: 217px;}.yes {&nbsp; display: inline-block;&nbsp; position: absolute;&nbsp; height: 30px;&nbsp; width: 80px;&nbsp; margin: 0px;&nbsp; left: 100px;}.yes>button {&nbsp; display: block;&nbsp; cursor: pointer;&nbsp; margin: 0px;&nbsp; padding: 0px;&nbsp; border: 0px;&nbsp; border-radius: 8px;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; color: white;&nbsp; font-weight: 900;&nbsp; font-size: 13px;&nbsp; font-family: sans-serif;&nbsp; opacity: 1;&nbsp; z-index: 2;&nbsp; background-color: rgba(129, 127, 127, 0.808);}.no {&nbsp; display: inline-block;&nbsp; position: absolute;&nbsp; height: 30px;&nbsp; width: 80px;&nbsp; margin: 0px;&nbsp; right: 300px;}.no>button {&nbsp; display: block;&nbsp; cursor: pointer;&nbsp; margin: 0px;&nbsp; padding: 0px;&nbsp; border: 0px;&nbsp; border-radius: 8px;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; color: white;&nbsp; font-weight: 900;&nbsp; font-size: 13px;&nbsp; font-family: sans-serif;&nbsp; opacity: 1;&nbsp; z-index: 2;&nbsp; background-color: rgba(129, 127, 127, 0.808);}.langmessage {&nbsp; position: absolute;&nbsp; top: 80px;&nbsp; text-align: center;&nbsp; font-weight: 900;&nbsp; font-size: 13px;&nbsp; font-family: sans-serif;&nbsp; color: white;&nbsp; left: 10px;&nbsp; right: 10px;}<div class="container">&nbsp; <div class="window" id="win">&nbsp; &nbsp; <div class="layover">&nbsp; &nbsp; &nbsp; <div class="h2">&nbsp; &nbsp; &nbsp; &nbsp; <h2>Oops!</h2>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="yesandno">&nbsp; &nbsp; &nbsp; &nbsp; <figure class="yes">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onclick="window.location.href= 'espanol.html';">Si</button>&nbsp; &nbsp; &nbsp; &nbsp; </figure>&nbsp; &nbsp; &nbsp; &nbsp; <figure class="no">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onclick id="buttonn">No</button>&nbsp; &nbsp; &nbsp; &nbsp; </figure>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="langmessage">&nbsp; &nbsp; &nbsp; &nbsp; 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?&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript