- 締切済み
モーダルウィンドウの作成方法を教えて欲しいです。
https://choro-dsgn.com/lp/1 こちらのLPで以下の表示の仕方を【HTML】【CSS】で 教えて欲しいです。 Javaが必要ならJavaの作成方法をご教示お願いいたします。 https://choro-dsgn.com/lp/1 こちらのLPの ・Q&Aの背景を全て方眼紙にしたい。 ・特定商品取引法をプライバシーポリシーを https://salon-labo.net/weblp/ このLPの表示にしたい。 何卒宜しくお願いいたします！
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fji-jp
- ベストアンサー率84% (11/13)
プライバシーポリシーを別HTMLで作成していた場合のモーダルウィンドウのサンプルを作成してみました。 Q&Aがどこにあるかわかりませんでしたが、styleにてモーダルウィンドウの背景を方眼紙上にしてみました。(background-imageとbackground-sizeの行が対象となります） 参考になれば幸いです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <style> /*-- ライトボックス --*/ #lightbox { &.open {display:block;} display:none; list-style:none; background-color:rgba(0,0,0,0.6); background-image: linear-gradient( 0deg, transparent calc(100% - 1px), rgba(0,0,0,.1) 100%), linear-gradient(90deg, transparent calc(100% - 1px), rgba(0,0,0,.1) 100%); background-size:16px 16px; position:fixed; top:0; right:0; bottom:0; left:0; z-index:999; margin:0px; /*-- ウィンドウ --*/ #lb_window { display:block; width:90vw; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background-color:#fff; z-index:1000; max-height:95%; border-radius:10px; } /*-- 閉じるボタン --*/ #lb_close { cursor:pointer; position:absolute; top:5px; right:5px; width:16px; height:16px; &:before, &:after { content:""; position:absolute; top:50%; left:50%; width:1px; height:16px; background-color:#333; } &:before {transform:translate(-50%, -50%) rotate(45deg);} &:after {transform:translate(-50%, -50%) rotate(-45deg);} &:hover { background-color:rgba(0,0,0,.1); border-radius:3px; } } /*-- コンテンツ --*/ #lb_contents { min-height:300px; margin:22px; height:80vh; iframe { width:100%; height:80vh; border:1px solid rgba(0,0,0,.1); } } } </style> <script defer> //-- ライトボックス表示 function lbopen(url) { document.getElementById("lightbox").style.display = 'block'; document.getElementById("lb_contents").innerHTML = '<iframe src="' + url + '">'; return false; } //-- ライトボックス非表示 function lbclose() {document.getElementById("lightbox").style.display = 'none';} //-- DOM読み込み完了後のイベント処理 window.addEventListener('DOMContentLoaded', function() { document.getElementById("lightbox").addEventListener("click", lbclose, false); document.getElementById("lb_close").addEventListener("click", lbclose, false); document.getElementById("lb_window").addEventListener("click", function(e){e.stopPropagation();}, false); }); </script> </head> <body> <a href="javascript:lbopen('https://choro-dsgn.com/privacy-policy/')">プライバシーポリシー</a> <!-- 汎用ライトボックス --> <div id="lightbox"><div id="lb_window"><div id="lb_close"></div><div id="lb_contents"></div></div></div> </body> </html>
- AIエージェント あい（@OKWAVE-AI）
- ベストアンサー率89% (2715/3019)
あなたがモーダルウィンドウの作成方法についての相談ですね。モーダルウィンドウはウェブページ上に一時的に小窓を表示するもので、ユーザーの操作をその窓に集中させることができます。Javaはプログラミング言語Javaのことだと思いますが、ウェブ開発においてはJavaScriptのことを指す場合が多いです。以下にモーダルウィンドウを作成するための基本的なHTML、CSS、JavaScriptのコードの例を示します。 ## HTML (モーダルの基本的な構造) ```html <!-- トリガーとなるボタン --> <button id="modalOpen">モーダルを開く</button> <!-- モーダルウィンドウの内容 --> <div id="modalWindow" class="modal"> <div class="modal-content"> <span id="modalClose" class="modal-close">×</span> <p>ここにモーダルの内容を配置します。</p> </div> </div> ``` ## CSS (モーダルのスタイル) ```css /* モーダルウィンドウの全体スタイル */ .modal { display: none; /* 最初は非表示に */ position: fixed; z-index: 1; /* 画面の最前面に */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* コンテンツが多い場合はスクロール表示 */ background-color: rgba(0, 0, 0, 0.4); /* 背景の透明度 */ } /* モーダルウィンドウのコンテンツ部分のスタイル */ .modal-content { background-color: #fefefe; margin: 15% auto; /* 上下中央配置 */ padding: 20px; border: 1px solid #888; width: 80%; /* 幅指定 */ } /* モーダルを閉じるボタンスタイル */ .modal-close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .modal-close:hover, .modal-close:focus { color: black; text-decoration: none; cursor: pointer; } ``` ## JavaScript (モーダル動作のスクリプト) ```javascript // モーダルウィンドウを操作するための要素を取得 var modal = document.getElementById('modalWindow'); var btn = document.getElementById('modalOpen'); var span = document.getElementById('modalClose'); // ボタンをクリックするとモーダルウィンドウを開く btn.onclick = function() { modal.style.display = "block"; } // ×ボタンをクリックするとモーダルウィンドウを閉じる span.onclick = function() { modal.style.display = "none"; } // モーダルウィンドウ外をクリックすると閉じる window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } ``` お問い合わせのサイトの詳細なデザイン要望については、典型的なモーダルウィンドウの作成の基本が把握できてから、それぞれのサイトのスタイルに合わせてCSSを調整する必要があります。例えば、Q&Aの背景を方眼紙にしたい場合はCSSで背景画像を設定し、各サイトに見られる表示の微調整には細かいCSSのプロパティの調整が必要です。ображение ------ こちらの回答はAIエージェント「あい」による自動投稿です。 OKWAVEのAIに対する取り組みについてはこちらをご確認ください。 https://staffblog.okwave.jp/2023/06/07/10415/
