ハッシュURLでモーダルしたい。そう言われたことはありますか？
みんな大好きモーダル。
サンプル
https://astrowave.jp/amnesia_record/hashmodal.php#terms
↑ #terms（# + 文言）を、URLのお尻に付けることでモーダルを確認できます。
クリックしてモーダルさせるのとは違う、レアな出現率の要件なので、すっかり忘れること受け合いです。
「LPサイト」でよく見かけると思います。
LP学園！夏の甲子園出場の常連校だった。
違います、ランディングページ（Landing Page）の略です。
も〜だるぅ。。。 ω• `)ﾁﾗｯ
【共有】ハッシュURL でモーダルさせたい
どうやるのでしょう。
「ハッシュURL」と「モーダル」のワードを入れてAIに聞くと1発で正解を出してくれると思います。
AIで一発回答なのに、記事にする意味あるのだろうか。
短納期に焦ってる時、急に言われると頭が真っ白になったりしませんか？
AIに変な質問の仕方をしてませんか。
何回もやっています。しかし、光陰矢の如し。
あの時書いたあのコードあのホームページ蝉時雨
もうありません、残念！
夏の終わりを告げる夕日のように、デジタルの狭間へと足早に落ちていきましたとさ。
html
<section class="containar">
<div id="modal">
<div class="modal__bg js-modal-close"></div>
<div class="scroll">
<div class="modal_box">
<div class="modal_inner">
<h3 class="modal_ttl">ハッシュURLモーダル<br>応募規約</h3>
<p class="sub_txt">応募を希望される方は、この応募規約（以下「本規約」といいます。）をよくお読みの上、同意される場合のみ応募してください。なお、本キャンペーンに応募された方は、本規約に同意したものとみなします。</p>
<p class="sub_ttl ttl_top">キャンペーン期間</p>
<p class="txt">開始 : 2024年●月●日(月) ●●:●●</p>
<p class="txt non-top">終了 : 2024年●月●日(月) ●●:●●</p>
<p class="sub_ttl">応募方法</p>
<p class="txt">キャンペーン期間中、応募者の中から抽選で合計300名様に「ほんの感謝の気持ち」をプレゼントいたします。</p>
<p class="txt indent_number inden_top"><span>1.</span><a href="https://x.com/Saigamo_a" target="_blank">@Saigamo_a</a> をフォロー</p>
<p class="indent_number"><span>2.</span>よかったらフォローしてください。</p>
<p class="sub_ttl">応募資格</p>
<p class="indent"><span>・</span>応募規約に同意頂いた日本国内にお住まいの18歳以上の方。</p>
<p class="indent"><span>・</span>非公開アカウントでのご応募は無効となります。</p>
<p class="sub_ttl">当選発表</p>
<p class="indent"><span>・</span>厳正なる抽選の上、メールにてご連絡させていただきます。</p>
<p class="indent"><span>・</span>当選後、Xダイレクトメールを送付します。</p>
<p class="indent"><span>・</span>賞品の発送は、2024年●月●日頃を予定しております。</p>
<p class="indent"><span>・</span>諸事情により、発送が多少前後する場合があります。</p>
<p class="indent"><span>・</span>発送日、時間指定はできかねます。</p>
<p class="indent"><span>・</span>ダイレクトメッセージでご案内する期限までにプレゼントの発送先をご登録いただけない場合は、当選を無効とさせていただきます。</p>
<p class="indent"><span>・</span>住所の誤記、転居先不明、長期不在等の理由によりプレゼントをお届けできない場合、当選を無効とさせていただきます。</p>
<p class="sub_ttl">注意事項</p>
<p class="info indent"><span>・</span>キャンペーン期間中、ご応募は何度でも可能ですが、当選はお1人様1回までとなります。</p>
<p class="info indent"><span>・</span>ご応募いただいた内容に関しての変更・取り消しはできません。</p>
<p class="sub_ttl">個人情報の取り扱いについて </p>
<p class="info indent"><span>・</span>本キャンペーンに応募申請いただいた時点で、個人情報の取扱いに同意・承認いただいたものといたします。</p>
<p class="info indent"><span>・</span>お預かりしたお客様の個人情報は、賞品発送に使用いたします。</p>
<p class="info indent"><span>※</span>詳細はプライバシーポリシー（<a href="https://neo.astrowave.jp/privacy-policy/">https://neo.astrowave.jp/privacy-policy/</a>）をご確認ください。</p>
<p class="sub_ttl">本キャンペーンに関するお問合せ</p>
<p class="txt">お問合せページよりお問合せください。<br>
<a href="https://neo.astrowave.jp/contact/" target="_blank">https://neo.astrowave.jp/contact/</a>
</p>
</div>
<div class="modal-close">
<svg viewBox="0 0 20.707 20.707" height="20.707" width="20.707" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-1136.39 -73.851)"><path stroke-width="1" stroke="#707070" fill="#7b7c69" transform="translate(-1540 209)" d="M2676.744-134.8l20,20"></path><path stroke-width="1" stroke="#707070" fill="#7b7c69" transform="translate(1271.539 2770.948) rotate(-90)" d="M2676.744-134.8l20,20"></path></g></svg>
</div>
</div>
</div>
</div>
</section>ページ全体を覆うウィンドウを妄想します。
私はよく、閉じ</body>の上にモーダル要素を仕込みます。
css
.containar {
z-index: 1000;
}
#modal {
width: 100%;
padding: 0 0;
position: fixed;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
transition: .3s;
box-sizing: border-box;
z-index: 2;
}
#modal.active{
opacity: 1;
visibility: visible;
}
.scroll {
overflow-y: auto;
max-height: calc(100svh - 0px);
}
.modal_box {
max-width: unset;
margin: 40px 80px;
background: #fff;
position: relative;
}
.modal_inner {
max-width: 700px;
margin: 0 auto;
padding: 80px 20px 100px;
}
.modal-open{
cursor: pointer;
}
.modal-close {
position: absolute;
top: 40px;
right: 40px;
width: 20px;
height: 20px;
cursor: pointer;
}
.modal_inner .modal_ttl {
font-weight: 600;
font-size: 26px;
letter-spacing: 0.05em;
line-height: 37px;
text-align: center;
color: #000;
}
.modal_inner .sub_txt {
font-weight: 500;
font-size: 13px;
letter-spacing: 0.05em;
line-height: 25px;
text-align: left;
color: #000;
margin: 58px 0 0;
}
.modal_inner .txt {
font-weight: 500;
font-size: 13px;
letter-spacing: 0.05em;
line-height: 25px;
text-align: left;
color: #000;
margin: 8px 0 0;
}
.modal_inner .txt.non-top {
margin: 4px 0 0;
}
.modal_inner .indent {
text-indent: -1.5em;
padding-left: 1.5em;
font-weight: 500;
font-size: 13px;
letter-spacing: 0.05em;
line-height: 20px;
color: #000;
margin: 10px 0 0;
}
.modal_inner .indent span {
color: #000;
margin: 0 5px 0 1px;
}
.modal_inner .info.indent {
text-indent: -1.9em;
padding-left: 1.9em;
font-weight: 500;
font-size: 11px;
letter-spacing: 0.05em;
line-height: 17px;
text-align: left;
color: #000;
margin: 10px 0 0;
}
.modal_inner .info.indent span {
color: #000;
margin: 0 8px 0 1px;
}
.modal_inner .indent_number {
text-indent: -1.5em;
padding-left: 1.5em;
font-weight: 500;
font-size: 13px;
letter-spacing: 0.05em;
line-height: 20px;
color: #000;
margin: 10px 0 0;
}
.modal_inner .indent_number span {
color: #000;
margin: 0 5px 0 1px;
}
.inden_top {
margin: 20px 0 0 !important;
}
.modal_inner a {
color: #000;
text-decoration: underline;
}
.modal_inner a:hover {
text-decoration: none;
}
.modal_inner .sub_ttl {
font-weight: 600;
font-size: 16px;
letter-spacing: 0.05em;
line-height: 1.4;
text-align: left;
color: #000;
margin: 42px 0 0;
}
.modal_inner .sub_ttl.ttl_top {
margin: 50px 0 0;
}
.modal__bg{
background: rgba(0,0,0,0.5);
height: 100vh;
position: absolute;
width: 100%;
top: 0;
}
@media (width < 768px) {
.modal_box {
max-width: unset;
margin: 13px 13px;
background: #fff;
position: relative;
}
.modal_inner {
max-width: 650px;
margin: 0 auto;
padding: 60px 20px 65px;
}
.modal-open{
cursor: pointer;
}
.modal-close {
position: absolute;
top: 13px;
right: 13px;
width: 13px;
height: 13px;
cursor: pointer;
}
.modal-close svg {
width: 100%;
height: auto;
}
}モーダルはz-indexで一番上になるよう指定してください。
javascript
<script>
var opne_flag = false;
$(function(){
var open = $('.modal-open'),
close = $('.modal-close,.js-modal-close'),
container = $('#modal');
// ハッシュが存在する場合、そのハッシュに対応するモーダルを開く
var hash = window.location.hash;
if(hash) {
openModalByHash(hash);
}
open.on('click',function(){
modalOpen();
container.addClass('active');
return false;
});
close.on('click',function(){
modalClose();
container.removeClass('active');
return false;
});
function openModalByHash(hash) {
if(hash === '#terms') {
modalOpen();
container.addClass('active');
}
}
});
function modalOpen() {
scTop = $(window).scrollTop();
var bodyWidth = $(window).width();
var hSize = $(window).height();
var allWrapTop = parseInt(scTop);
$(this).next().addClass('is-show');
$('body').addClass('show-modal');
$('.containar').stop().animate({}, {
duration: 600,
easing: 'easeOutQuint',
complete: function () {
$(this).css({
"position": "fixed",
"width": "100%",
"top": -scTop
});
}
});
opne_flag = true;
}
function modalClose() {
var allWrapTop = parseInt(scTop);
$('body').removeClass('show-modal');
$('.containar').stop().animate({}, {
duration: 600,
easing: 'easeOutQuint',
complete: function () {
$(this).css({
"position": "static",
"width": "100%",
});
$(window).scrollTop(scTop);
}
});
opne_flag = false;
}
</script>全体のスクリプトは私がよく使うモーダルのコードです。
「ハッシュURL」のために追加した、ミソな部分は以下の2箇所です。
・9〜12行目
・26〜31行目
※このスクリプトは jQueryが必要です。
※jQueryが使いたくない場合はAIに相談したら変換してくれます。
以上になります。
参考サイト置き場
「分かった」気になれるIT用語辞典
モーダルの正式名称はモーダルウィンドウ。
https://wa3.i-3-i.info/word11432.html
【AI】イラストを描いてもらった
今回の記事のキャッチ画像で使わせてもらいます「Memeplex.app」で作成した画像です。誰でもgoogleアカウントでログインして使えます。
この記事にピッタリなイラストのための考えたリクエストは「銀河がほとんど存在しない真っ暗な巨大な空間「ボイド」に、弱く光り浮かぶ小惑星一体型の宇宙船基地を、宇宙船内から眺めるパイロットの旅人」です。
選んだモードは以下の3つです。
- 画風指定なし
- ハリウッドSF風
- UnrealEngine5風
小惑星にしてはデカすぎる気がします。
でもいい雰囲気かな。
星間旅路のメロディ
「宇宙の静けさに包まれながら、漂流する過去の音楽を捜し求め、銀河の奥底でその旋律に耳を傾ける。」
「この電波はどこの星からきたのだろうか。」
都市も生命も輝いていた、そんな雰囲気がします。