Can´t make window fade using javascript or add transition effect in css
Question
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.
At the same time, I've tried adding a transition effect to the div in CSS but it didn't work either. My idea was to add this fading effect to the if statement in JavaScript part but that didn't work.
.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 answers
solution1
1 ACCPTED 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. Below are two solutions, one using jQuery and another with plain javascript .
jQuery solution:
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.
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:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can we add an element, and make it fade in, not using jQuery or CSS transition, but just use CSS animation?
How to add a fade effect to html transition with javascript
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?
How to bypass the css transition effect, using JavaScript?
Javascript / CSS tabs with fade effect
How to add fade effect on this javascript
Add Fade Effect in Slideshow (Javascript)
How to trigger CSS3 fade-in effect using Javascript?
Can't get css fade in triggered by javascript to fade in
Related Tags