モーダルを作ろう!(potition: fixedを使うときは要注意!!)
Share
こんなことを説明しています!
- モーダルの作り方
- position: fixedと一緒に使ってはいけないプロパティ
解説動画
コードと解説
重要なポイント
position: fixed の親要素には transformプロパティを指定してはいけない!
こちらの CSS カスケーディングスタイルシート でそのように設定されている記述があります。
position: fixedを指定したいときは、親要素は基本的には関係ないので、タグをなるべく外側に出します。
そしてアニメーションをつけたいときは、a タグと id 指定してアニメーションを実装していきます。
以下の記事で aタグとidの関係を説明しているので、ご覧ください!
HTMLコード
<main>
<div class="inner">
<div class="wrap">
<a href="#modal1" class="item">
<img src='./img/img1.jpg' alt='画像' width='1000' height='500' loading='lazy'>
</a>
<a href="#modal2" class="item">
<img src='./img/img2.jpg' alt='画像' width='1000' height='500' loading='lazy'>
</a>
</div>
<div class="modal-bg" id="modal1"></div>
<div class="modal-container">
<img src='./img/img1.jpg' alt='画像' width='1000' height='500' loading='lazy'>
</div>
<div class="modal-bg" id="modal2"></div>
<div class="modal-container">
<img src='./img/img2.jpg' alt='画像' width='1000' height='500' loading='lazy'>
</div>
</div>
</main>
CSSコード
main { position: relative; &::after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 50vh; background: rgba(0, 195, 255, 0.28); } } .inner { margin: auto; width: 100vw; height: 100vh; max-width: 1000px; position: relative; } .wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; column-gap: 40px; width: 100%; } .item { flex: 1; display: block; } .modal-container { display: none; position: fixed; z-index: 100; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 40px; background: #fff; img { width: 1000px; height: auto; } } .modal-bg { display: none; position: fixed; z-index: 99; background: #000000c4; top: 0; left: 0; width: 100vw; height: 100vh; }
jQueryコード
$('.item').on('click', function () { $($(this).attr('href')).fadeIn(100); $($(this).attr('href')).next('.modal-container').fadeIn(100); return false; }); $('.modal-bg').on('click', function () { $(this).fadeOut(100); $(this).next('.modal-container').fadeOut(100); return false; });