2013年8月10日土曜日

CSSとピュアJavaScriptだけでトーストとかポップアップ

モバイルアプリやWebアプリでよく使われる表現方法として、トーストポップアップがあります。
それらをCSSとピュアなJavaScriptだけで実現してみました。


<!DOCTYPE html>
<html>
<meta charset = "utf-8"></meta>
<style type="text/css">
body {
  width: 100%;
  margin:0 auto;
  text-align: center;
}
button {
  text-align: center;
  width: 300px;
  height: 80px;
  border-radius: 10px;
  background-color: blue;
  color: white;
}

/* style for Toast */
#toast {
  visibility: hidden;
  z-index: 999;
  background-color: rgba(0,0,0,0.8);
  color: white;
  padding:12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  text-align: center;
  position: fixed;
  top: 0; /* if show bottom, replace to 'bottom: 0;' */
  left: 0;
  width: 100%;
}

/* style for Popup */
#popup_wrapper {
  visibility: hidden;
  z-index: 999;
  text-align: center;
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
}
#popup {
  visibility: hidden;
  z-index: 999;
  background-color: rgba(0,0,0,0.8);
  color: white;
  padding:12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  margin: 0 auto;
  width: 100px;
}
</style>
<script type="text/javascript">
window.onload = function(){

  // Toast
  var toast = document.querySelector('#toast');
  document.querySelector('#toast_btn').addEventListener('click', function(){
    toast.innerHTML = 'Toast!';
    toast.style.visibility = 'visible';
    // disappear after a few seconds.
    setTimeout(function() {
      toast.innerHTML = "";
      toast.style.visibility = 'hidden';
    }, 1000);
  });

  // Popup
  var popup = document.querySelector('#popup');
  document.querySelector('#popup_btn').addEventListener('click', function(){
    popup.innerHTML = 'Popup!';
    popup.style.visibility = 'visible';
    // disappear after a few seconds.
    setTimeout(function() {
      popup.innerHTML = "";
      popup.style.visibility = 'hidden';
    }, 1000);
  });

}
</script>
<body>
<div id="toast"></div>
<div id="popup_wrapper"><p id="popup"></p></div>
<button id="toast_btn">Toast!</button>
<button id="popup_btn">Popup!</button>
</body>
</html>

ChromeやFirefoxで試してみてください。スクロールしてもちゃんと適切な位置に表示されていると思います。
ちなみにIEは試してません。IEさえ無視してしまえば、jQueryなどのライブラリを使用しなくても意外にも簡単に実現できるってことですね。

0 件のコメント:

コメントを投稿