クリックするとモーダルが表示されます
背景をクリックするとモーダルが閉じます
表示されるモーダル
コード.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;">
関連記事
スプレッドシートに入力ツールを表示する
入力ツールからシートに値を入力する（ボタン）
入力ツールからシートに値を入力する（改行2つ）
サイドバー上でデータを入出力するUIを作る
