- 締切済み
モーダルウィンドウの作成方法を教えて欲しいです。
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の表示にしたい。 何卒宜しくお願いいたします！
- choro322
- お礼率0% (0/3)
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （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）
- ベストアンサー率88% (1674/1897)
あなたがモーダルウィンドウの作成方法についての相談ですね。モーダルウィンドウはウェブページ上に一時的に小窓を表示するもので、ユーザーの操作をその窓に集中させることができます。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/
関連するQ&A
- メルマガ登録のコーディング方法を教えてください。
以下のサイトでの「HTML」「CSS」で コーディングする方法を教えて欲しいです。 ・メルマガ登録LPの場合、「メールアドレスを入力してください」の枠内にメールアドレスを打ってもらう場合はどのようにコーディングしたらよいでしょうか。 ・メルマガ配信スタンドのコード？の入れ方はどのようにしたら良いでしょうか？ https://choro-dsgn.com/lp/1/ どなたかご教示いただけますと幸いです！ 宜しくお願いいたします。
- 締切済み
- HTML
- 画像を変化させる方法。
現在ＣＳＳでホームページを作っています。ある画像の上にマウスを乗せた時、別の画像を表示させたいのですが、背景として、設定せず、Ｊａｖａ Ｓｃｒｉｐｔも使わず、ＣＳＳかＨＴＭＬだけで設定することは可能なのでしょうか？可能であれば、その方法を誰か教えていただけますか？よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSを使って画像を背景としてウィンドウ全体に表示する方法を探していま
CSSを使って画像を背景としてウィンドウ全体に表示する方法を探しています。 HTMl,CSSともに初心者なので、わかりにくい表現や、ただ単純に方法が間違っているだけかもしれませんが、助言をしていただけると大変助かります。 HTML上から画像を背景全体に表示する方法は下記の方法（http://www5e.biglobe.ne.jp/access_r/hp/html/html_026.html）で行えたのですが、その後Tableなどを作成しCSSで設定しようとすると全く表示されないので、CSSで背景全体に表示されることが出来れば、Tableなども問題なくできるのかなと考えました。しかしネット中を探しても未だにCSSから画像を背景全体に表示する方法を見つけることができません。 CSSから背景全体を表示することは不可能なのでしょうか？ もし背景全体を表示するのは上記のホームページで説明されている通りHTML上で入力しなければならないのでしょうか？そしてその場合、どのようにCSSを使ってTableを表示させるように出来るか教えてください。 今いろいろと試して下記のようにHTMLとCSSに書いたのですが、表示されているのは選択している画像が縦そして横にリピートされているだけです。 HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled</title> <meta name="generator" content="BBEdit 9.3" charset=UTF-8"/> <link rel="stylesheet" style type="text/css" href="css.css"> </head> <body> <table="1"> <tr> <td></td> <td></td> </tr> </table> </body> </html> CSS @charset "UTF-8"; body { background-image:url(../images/background.gif); position:absolute; width:100%; height:; top:0px; left:0px; z-index:1; } .1 { width:800pixel; height:600pixel; border:10pixel; } すいませんが助言していただけると大変感謝いたします。 よろしくお願いします。
- 締切済み
- CSS
- 現在、ある会社のHPを作成中ですが、MacOSからのアクセスを
現在、ある会社のHPを作成中ですが、MacOSからのアクセスを 全面的にブロックしたいのです。 そのようなHTMLやJavaスクリプト、もしくはCSSはあるでしょうか？ 表示出来ないというエラーメッセージが出て全く見えないように なればいいです。特定のメッセージが出るページへの誘導でも 構いません。 ちなみに私自身はスクリプトの知識は全くありません。 （最低限必要なHTMLの知識ぐらいしかないと思います） ホームページビルダー13を使って作成しています。 どうか宜しくお願いいたします。
- ベストアンサー
- JavaScript
- データベース作成はJava?
以前、以下の質問をした、プログラミング初心者です。 http://okwave.jp/qa/q8624881.html ■質問と回答の要約 Q.「みんなのきょうの料理」のようなWebページを作成したい A.Google App Engine + Java(ベストアンサー) いざ作成しようと調べ始めたのですが、作りたいWebページのどの機能でJavaを使うのか分からず、つまずいています。 Webページ作成といえばHTML,CSS,JavaScript,jQueryなどが考えられますが、それらの名前は挙がらず、Javaという回答でした。 Javaはどのような用途で使用するのでしょうか？
- ベストアンサー
- その他(データベース)
- ホームページ作成で困っています(body)
イーウェブ様「選択した背景色(画像)に変更して保存する」（http://javascript.eweb-design.com/1306_bis.html）の方法に、 追加でこちらのページ（http://www.allinthemind.biz/markup/css/background-size.html）指定要素に背景画像が常にある形でフィット - cover -を使って背景を表示したいです。 更に追加でこちらのサイト（http://www.aichan.biz/html/css/background-position.html）の中央寄せで表示しようと思っています。 どうすればいいですか＿？
- 締切済み
- CSS
- 背景はそのままで内容部分だけが上下する方法
お邪魔致します。質問させて下さい。 以下の、氷室京介さんのサイト、Himuro.comを例に挙げましたが、 http://www.himuro.com/ グレイ色の背景は、上下スクロールしてもそのままで動きませんが、添付した画像の様に、赤枠で囲ったところは上下スクロールすれば、上下方向に動きます。 こういう、 【Q：背景は動かずに、内容コンテンツだけが上下に動く様なデザインは、JavaScriptを使わねば無理でしょうか？それとも、HTML5／CSS3だけで出来るものでしょうか？】 私はHTML5／CSS3は出来ます(完璧ではなくまだまだ学習中)が、JavaScriptは学習していないので、知らないのです。 キーワードで２～３、ググってはみたのですが、今のところまだ不明で・・・。 どなたかお教え頂けますか？
- ベストアンサー
- CSS
- FlashからLightboxを使用してウェブページを表示させる方法
初めて質問させていただきます。 FlashとLightboxについてです。 FlashからLightboxを使って、ウェブページを表示させたいのです。 以下のサイトに画像を表示させる方法は載っているのですが、ウェブページを表示させる方法がわかりません。 http://youmos.com/reference/lightboxflash.html FlashやHTML、CSSの知識は多少あるのですがJavaの知識はあまりないので…。 よろしければご教授の程、よろしくお願いします。
- ベストアンサー
- JavaScript
- ウィンドウサイズを固定するには？
うまく説明ができないのですが、index.htmlを作ったとします。 それをローカルの状態でブラウザで表示（index.htmlをWクリ）させた時にウィンドウサイズを固定したいのです。（ブラウザはIE6です） ツールが使える環境ではないのでなんとかHTMLでできないでしょうか？ css,ジャバスクリプトなどは良く分からないのでそちらを使っての方法などがあれば教えていただきたいです。 どうかよろしくお願いします。
- ベストアンサー
- HTML
- ホームページ作成でのリンク
はじめまして。 HPを作成しているのですが いくつかのページ(全て自分が作成したhtmlファイル)をリンクしてみると特定のページのリンクをクリックしても、ページを表示しません。 HTMLとCSSしか使っておらず、 複雑なことも難しいこともしていません。 なぜ、このような事が起こっているのか 分かる方いらっしゃいますか？ 宜しくお願いします。
- 締切済み
- その他（趣味・娯楽・エンターテイメント）
