无法使用 javascript 使窗口淡入淡出或在 css 中添加过渡效果
[英]Can´t make window fade using javascript or add transition effect in css
问题描述
I've been having issues regarding the usage of the fadeOut function in order to add an effect whenever I close the window pop up message.
我一直在使用fadeOut函数时遇到问题，以便在我关闭窗口弹出消息时添加效果。
At the same time, I've tried adding a transition effect to the div in CSS but it didn't work either.同时，我尝试在 CSS 中为 div 添加过渡效果，但它也不起作用。 My idea was to add this fading effect to the if statement in JavaScript part but that didn't work.我的想法是将这种淡入淡出效果添加到 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>
1 个解决方案
解决方案1
1 已采纳 2020-03-31 22:39:03
In order to use the fadeOut() method, you would have to include jQuery into your project but you could also manually program it yourself using plain javascript.为了使用fadeOut()方法，您必须将jQuery包含到您的项目中，但您也可以使用普通的javascript 手动对其进行编程。 Below are two solutions, one using jQuery and another with plain javascript .下面是两种解决方案，一种使用jQuery ，另一种使用纯javascript 。
jQuery solution: jQuery 解决方案：
Note: If using jQuery , you could then rewrite parts of your code like document.getElementById("win") to just $("#win") , etc. but that runs out of the scope of the question.注意：如果使用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>
Vanilla JavaScript solution:原生 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
我们如何添加一个元素并使其淡入，而不是使用 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?
如何使用JavaScript向HTML过渡添加淡入淡出效果 - How to add a fade effect to html transition with javascript
JavaScript使用CSS不透明过渡淡入 - JavaScript fade in using CSS opacity transition
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?
如何绕过css过渡效果，使用JavaScript？ - How to bypass the css transition effect, using JavaScript?
Javascript / CSS 带渐变效果的标签 - Javascript / CSS tabs with fade effect
如何在此javascript上添加淡入淡出效果 - How to add fade effect on this javascript
在幻灯片中添加淡入淡出效果 (Javascript) - Add Fade Effect in Slideshow (Javascript)
如何使用Javascript触发CSS3淡入效果？ - How to trigger CSS3 fade-in effect using Javascript?
无法通过JavaScript触发的CSS淡入 - Can't get css fade in triggered by javascript to fade in
相关标签