Ryo Blog
〜WEB制作をスキルに〜
こんなことを説明しています！
- モーダルの作り方
- 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;
});
Category
Tag
X
Youtube
私がWEB制作フリーランスとして独立するために学習したオンラインスクール「デイトラ」の詳細リンクはこちら↓↓
Products
Coming Soon
HP制作のご依頼
現在エンドクライアント様向けの事業サイトを作成中です。
WEB制作業務委託
のご依頼
LPコーディング、WordPress構築、Shopify構築、Liquid編集業務承ります！ 約1年間で80サイト以上作成をしてきました。LP制作 最短2日で納品！
詳しくは、ポートフォリオをご覧ください。
コンテンツ
Ryo'Portfolio裏側徹底解説、レスポンシブほぼ不要のコーディング方法、実務必須のやや難しい実装解説、見積もりからコーディング、納品までの最初から最後まで全部見せます解説動画、等々 「学習終わったけど実務が不安」という人に向けた「実務のお守り」のようなコンテンツを現在作成中です。
© Ryo Blog