LANG SELRCT

コードを書く場所についてはこちら

2018年4月9日月曜日

モーダルに閉じるボタンをつける


モーダルを作る で作ったモーダルの右上に
このような閉じるボタン(✕)をつける




コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
  .modal_back {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
  }

  .modal_content {
    width: 30%;
    height: 30%;
    border: 2px solid gray;
    padding: 15px;
    margin: 10% auto;
    background-color: white;
  }
  
  .clear_bt {
    float: right;
    color: gray;
  }
</style>
</head>
<body>
  <button id="bt">Modal</button>
  <div id="modal_back" class="modal_back">
    <div class="modal_content">
      <i id="clear_bt" class="material-icons clear_bt">clear</i>
      <p>このエリアの外をクリックすると閉じます</p>
    </div>
  </div>
  <script>
    var modal = document.getElementById('modal_back');

    document.getElementById("bt").onclick = open_modal;
    modal.onclick = close_modal;

    function open_modal() {
      modal.style.display = "block";
    }

    function close_modal(event) {
      if (event.target == modal || event.target.id == 'clear_bt') {
        modal.style.display = "none";
      }
    }
  </script>
</body>
</html>
意訳
これはHTML5文書です


Material Iconsを利用できるようにする

モーダルの背景のスタイル
幅100%
高さ100%
背景色と透明度
表示しない
位置を固定する
左の余白0
上の余白0
最前面にする


モーダルの中身のスタイル
幅を決める
高さを決める
枠線の幅2px 1本線 gray
内側の余白15px
上から10%の距離
背景色white


閉じるボタンのスタイル
右に寄せる
文字色gray




ボタンを置く
モーダルの背景を置く
モーダルの中身を置く
閉じるボタンを置く
段落にテキストを置く



id が modal_back の要素を取得する

id が bt の要素をクリックしたらopen_modalを実行する
id が modal の要素がクリックされたらclose_modalを実行する

この機能がやること
id が modal の要素を block 要素として表示する


この機能がやること
もしクリックされた要素の id が modal なら
その要素を非表示にする