ぬえさぶろうのAnimate放送部

便利ツール

アラートボックス

アラートボックスって、どういうときに使うもの

アラートボックスとは、ボタンのクリック時にユーザーにメッセージを表示するもの。

• HTML

  
  <button id="cllick">Click Me!</button>
          <div id="bg">
              <div id="alertBox">
                  <p>Good Job!</p>
                  <button id="ok">OK</button>
              <!--/#alertBox--></div>
          <!--/#bg--></div> 
  

• CSS

  /*アラートボックス*/
  #click{
      margin:0 auto;
  }
  #bg{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:rgba(0, 0, 0, .4);
  }
  #alertBox{
      margin:200px auto 0;
      text-align:center;
      padding-top:25px;
      width:300px;
      height:100px;
      background:#fff;
      border-radius:3px;
      box-shadow:2px 2px rgba(0, 0, 0, .3);
  }
  

• JS

  //アラートボックス
  $(function(){
      $("#bg").hide();
      
      /*「CLICK ME」ボタンをクリック*/
      $("#click").click(function(){
          $("#bg").fadeIn(300);
      });
      
      /*「OK」ボタンをクリック*/
      $("#ok").click(function(){
          $("#bg").fadeOut(300);
      });
  });
  

解説

アラートボックス

• 初期状態で表示されるボタン"Click Me"ボタン（id="click"）
• 画面を黒くする背景 id="bg"
• クリック後、表示したいid = "alertBox"
• メッセージを消去する”OK”ボタン id="ok"