Beúszó ablak - CSS3 + JavaScript

CSS3 + Javascript beúszó ablak

Már régóta keresek olyan felugró, vagy beúszó ablakot, ami nem tartalmaz felesleges CSS, vagy JavaScript kódokat. Mivel egy évnyi kutatás után sem találtam ilyesmit, kénytelen voltam saját magam készíteni egyet.

Miért jó ez? Azért, mert kis helyet foglal, viszont minden benne van, ami kell egy ilyen kiegészítőhöz: az ablak tartalmát mindenki szabadon tudja szerkeszteni, tehet bele képet, szöveget, táblázatot, űrlapot - a lehetőségeknek csak a fantáziánk szab határt! :)

A kiegészítő egyelőre fejlesztés alatt áll, de hamarosan publikus lesz a forráskódja is. Addig is ezen a weboldalon megtekinthetitek a demót!

Kattints a gombra az ablak megnyitásához!

A projekt folyamatosan fejlesztés alatt áll. A legfrisebb verzió forráskódját itt találjátok:

	  <!-- Ablak megnyitására szolgáló gomb -->
	  <input type="button" value="Ablak megnyitása!" onclick="WindowFunction()" />
	  
	  <!-- Ablak és tartalma -->
	  <div id="window">
      <p>Ablak tatalma</p>
	  
	  <!-- Ablak bezárására szolgáló gomb -->
	  <div align="center"><input type="button" value="Bezárás" onclick="WindowXFunction()" /></div>
      </div>
	  
	  <!-- Sötét háttér -->
	  <div id="windowback" onclick="WindowXFunction()"></div>

  input[type="button"] {
  width: auto;
  height: 40px;
  background: #242424;
  border: none;
  border-radius: 20px 20px 20px 20px;
  -moz-border-radius: 20px 20px 20px 20px;
  -webkit-border-radius: 20px 20px 20px 20px;
  -o-border-radius: 20px 20px 20px 20px;
  padding: 10px 10px 10px 10px;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
}

#window {
  display: none;
  width: 40%;
  min-width: 160px!important;
  height: auto;
  padding: 8px;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  -moz-border-radius: 4px 4px 4px 4px;
  -webkit-border-radius: 4px 4px 4px 4px;
  -o-border-radius: 4px 4px 4px 4px;
  box-shadow: 0px 0px 8px #242424;
  -moz-box-shadow: 0px 0px 8px #242424;
  -webkit-box-shadow: 0px 0px 8px #242424;
  -o-box-shadow: 0px 0px 8px #242424;
  position: fixed;
  left: 30%;
  z-index: 1000;
}
#window p {
  width: 97%;
}
.window-in {
  animation: windowin 0.4s ease;
  -webkit-animation: windowin 0.4s ease;
  -moz-animation: windowin 0.4s ease;
  -ms-animation: windowin 0.4s ease;
  -o-animation: windowin 0.4s ease;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
}
.window-out {
  animation: windowout 0.4s ease;
  -webkit-animation: windowout 0.4s ease;
  -moz-animation: windowout 0.4s ease;
  -ms-animation: windowout 0.4s ease;
  -o-animation: windowout 0.4s ease;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
}
#windowback {
  display: none;
  width: 100%;
  height: 100%;
  background: #242424;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
}
.windowback-in {
  animation: windowbackin 0.4s ease;
  -webkit-animation: windowbackin 0.4s ease;
  -moz-animation: windowbackin 0.4s ease;
  -ms-animation: windowbackin 0.4s ease;
  -o-animation: windowbackin 0.4s ease;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
}
.windowback-out {
  animation: windowbackout 0.4s ease;
  -webkit-animation: windowbackout 0.4s ease;
  -moz-animation: windowbackout 0.4s ease;
  -ms-animation: windowbackout 0.4s ease;
  -o-animation: windowbackout 0.4s ease;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
}

@keyframes windowin {
  0% {
    top: -75%;
  }
  100% {
    top: 25%;
  }
}

@-webkit-keyframes windowin {
  0% {
    top: -75%;
  }
  
  100% {
    top: 25%;
  }
}
@keyframes windowout {
  0% {
    top: 25%;
  }
  100% {
    top: -75%;
  }
}

@-webkit-keyframes windowout {
  0% {
    top: 25%;
  }
  100% {
    top: -75%;
  }
}

@keyframes windowbackin {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@-webkit-keyframes windowbackin {
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 0.8;
  }
}
@keyframes windowbackout {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes windowbackout {
  0% {
    opacity: 0.8;
  }
  
  100% {
    opacity: 0;
  }
}

function WindowFunction() {
  document.getElementById("window").style.display = "inline-block";
  document.getElementById("window").className = "window-in";
  
  document.getElementById("windowback").style.display = "inline-block";
  document.getElementById("windowback").className = "windowback-in";
  
  
}

function WindowXFunction() {
  document.getElementById("window").className = "window-out";
  
  document.getElementById("windowback").className = "windowback-out";
  
  setTimeout( function() {
    document.getElementById("window").style.display = "none";
    document.getElementById("windowback").style.display = "none";
  }, 400);
}