CODEWITHSUNDEEP
javascripthtmlcss
Roger99
Roger99

Reputation: 61

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.

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>

Upvotes: 1

Views: 35

Answers (1)

Ivan86
Ivan86

Reputation: 5708

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>

Upvotes: 1

Related Questions