LANG SELRCT

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

2018年1月3日水曜日

モーダルを作る

HTML Serviceでこういうモーダルを作る






クリックするとモーダルが表示されます
背景をクリックするとモーダルが閉じます


表示されるモーダル



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




index.html
<!DOCTYPE html>
<html>
<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;
  }
</style>
<body>
  <button id="bt">Modal</button>
  <div id="modal_back" class="modal_back">
    <div class="modal_content">
      <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) {
        modal.style.display = "none";
      }
    }
  </script>
</body>
</html>
意訳
これはHTML5文書です


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


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



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



id が modal_back の要素を取得する

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

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


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








参考

W3Schools.com
How To Create a Modal Box
https://www.w3schools.com/howto/howto_css_modals.asp


備忘録

このブログの中に埋め込んでいるHTML
<div id="modal" style="width:100%;height:100%;background-color:rgba(0,0,0,0.4);display:none;position:fixed;left:0;top:0;z-index:1;">
<div style="width:30%;height:30%;border:2pxsolidgray;padding:15px;margin:10%auto;background-color:white;">