猿问

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

我一直在使用该fadeOut功能时遇到问题,以便在关闭窗口弹出消息时添加效果。

同时,我尝试过在CSS中给div添加过渡效果,但也没有成功。我的想法是在 JavaScript 部分的语句中添加这种淡入淡出效果if,但这不起作用。

<body>

  <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>


  <script type="text/javascript">

    var lang = navigator.language;

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

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

    }

    var button = document.getElementById("buttonn")

    buttonn.onclick = function() {

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

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

        div.style.display = "none";


      }

    }

  </script>


</body>


30秒到达战场
浏览 85回答 1
1回答

qq_遁去的一_1

为了使用该fadeOut()方法,您必须将其包含jQuery到您的项目中,但您也可以使用纯 JavaScript 手动对其进行编程。下面是两种解决方案,一种使用普通的jQuery,另一种使用普通的javascript。jQuery 解决方案:注意:如果使用jQuery,您可以重写部分代码,例如document.getElementById("win")等$("#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

相关分类

Html5
我要回答