[英]Can´t make window fade using javascript or add transition effect in css
我一直在使用fadeOut函數時遇到問題，以便在我關閉窗口彈出消息時添加效果。
同時，我嘗試在 CSS 中為 div 添加過渡效果，但它也不起作用。 我的想法是將這種淡入淡出效果添加到 JavaScript 部分的if語句中，但這不起作用。
.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; }
<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>
為了使用fadeOut()方法，您必須將jQuery包含到您的項目中，但您也可以使用普通的javascript 手動對其進行編程。 下面是兩種解決方案，一種使用jQuery ，另一種使用純javascript 。
jQuery 解決方案：
注意：如果使用jQuery ，那么您可以將部分代碼（如document.getElementById("win")重寫為$("#win")等$("#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>
我們如何添加一個元素並使其淡入，而不是使用 jQuery 或 CSS 過渡，而只是使用 CSS69F1C25ED15259
[英]How can we add an element, and make it fade in, not using jQuery or CSS transition, but just use CSS animation?
Using vanilla JavaScript, is it possible to add a DOM element and fade in using CSS transition, without using setTimeout or CSS animation?
[英]Using vanilla JavaScript, is it possible to add a DOM element and fade in using CSS transition, without using setTimeout or CSS animation?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.