モーダルを作る で作ったモーダルの右上に
このような閉じるボタン（✕）をつける
コード.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 なら その要素を非表示にする |
