デイトラweb制作中級編　DAY29

2022年6月24日 最終更新日時 : 2022年6月24日 nakanonakano

モーダルを作る

HTML

①モーダル（表示）

modal-contact + target-modal の詳細

modal-contact__content の詳細　↓

<div class="modal-contact target-modal">
        <div class="modal-contact__head">プライバシーポリシー</div>
        <!-- ここから -->
        <div class="modal-contact__content">
            <div class="modal-contact__sub-head">ほにゃらら</div>
            <div class="modal-contact__text">ほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃららほにゃらら。</div>
        </div>
        <!-- ここまで6セット -->
        <div class="modal-contact__button"><a class="js-close-button" href="" data-target=".target-modal">閉じる</a></div>
        <div class="modal-contact__icon"><a class="js-close-button" href="" data-target=".target-modal"><img src="./img/btn-batsu.png" alt=""></a></div>
</div>
<div class="modal-contact-background target-modal"></div>

※data-target についてはjQueryで

②モーダル（非表示）

<div class="contact-from__check">
    <label><input type="checkbox"><span><a href="" class="js-open-button" data-target=".target-modal">プライバシーポリシー</a>に合意する</span></label>
</div>

※data-target についてはjQueryで

①SCSS「.modal-contact」~「.modal-contact__text」

.modal-contact {
    position: fixed;
    z-index: 501;
    width: 900px;
    // 常に余白を持たせる
    max-width: calc(100% - 24px * 2);
    height: 652px;
    max-height: calc(100% - 24px * 2);
    background: #fff;
    box-shadow: 0 0 3px rgba(#000, 0.16);
    // 画面の真ん中に配置
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 60px;
    color: #707070;
    display: none;

    @include mq('sp') {
        padding-left: 30px;
        padding-right: 30px;
    }
}

.modal-contact__head {
    font-size: 24px;
    font-weight: 700;
    padding-bottom: 24px;
    position: relative;
    text-align: center;

    &::after {
        content: "";
        width: 100px;
        height: 2px;
        background: $color-main;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
    }
}

.modal-contact__content {
    margin-top: 40px;
    // 高さを指定
    height: calc(100% - 88px - 108px);
    overflow: auto;

    > :first-child {
        margin-top: 0;
    }
}

.modal-contact__sub-head {
    font-size: 20px;
    font-weight: 700;
    padding-left: 20px;
    position: relative;
    margin-top: 40px;

    &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 20px;
        background: $color-main;
    }
}

.modal-contact__text {
    margin-top: 16px;
    line-height: (24 / 16);
    padding-left: 20px;
}

オーバーフロー時の処理

.modal-contact__content だけスクロールできるようにする

ここで行っていること

1.　高さを指定して範囲を決める

2.　> :first-child で最初の要素だけ余白を取らない

3.　overflow でスクロールできるようにする

1.　高さを指定して範囲を決める

2.　> :first-child で最初の要素だけ余白を取らない

3.　overflow でスクロールできるようにする

overflowプロパティの種類　↓

参考記事

・overflowとは｜コーディングのプロが作るCSS辞典

②SCSS「.modal-contact__button」~「.modal-contact-background」

.modal-contact__button {
    margin-top: 60px;
    text-align: center;

    a {
        text-decoration: none;
        display: inline-block;
        width: 176px;
        padding: 14px;
        text-align: center;
        color: #fff;
        background: $color-main;
        font-weight: 700;
        border-radius: 8px;
        box-shadow: 0 3px 6px rgba(#000, 0.16);
    }
}

.modal-contact__icon {
    position: absolute;
    width: 40px;
    height: 40px;
    right: -20px;
    top: -20px;

    a {
        text-decoration: none;
    }

    img {
        width: 40px;
    }
}

.modal-contact-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(#000, 0.3);
    z-index: 500;
    display: none;
}

アイコン位置の設定

初期位置「right: 0;」「top: 0;」

移動後「right: -20px;」「top: -20px;」

※アイコンの縦幅と横幅が40pxで、半分ずつはみ出しているため -20px

レイヤー階層

z-indexの値

1.　通常のbody内のコンテンツ
→　auto（0）

2.　ヘッダー
→　100

3.　ドロワーを開いた時の黒背景
→　298

4.　ドロワーメニュー
→　299

5.　「≡」「×」
→　300

6.　モーダルを開いた時の黒背景
→　500

7.　モーダル
→　501

jQuery

jQuery('.js-close-button').on('click', function(e) {
    e.preventDefault();
    var target = jQuery(this).data('target');
    jQuery(target).hide();
});

jQuery('.js-open-button').on('click', function(e) {
    e.preventDefault();
    var target = jQuery(this).data('target');
    jQuery(target).show();
});

モーダルを閉じる

jQuery('.js-close-button').on('click', function(e) {
    e.preventDefault();
    var target = jQuery(this).data('target');
    jQuery(target).hide();
});

手順

HTML

1.　.js-close-button を×アイコンとボタンに設定する

2.　target-modal をモーダル全体と黒背景に設定する

3.　data-target=".target-modal" を×アイコンとボタンに設定する
→　data-…=".取得したいclass"


jQuery

1.　e.preventDefault(); でaタグ特有のページ遷移を無効化

2.　 .data('target') で 変数 target に値を代入
→　値 = .target-modal

3.　.hide() でモーダルと黒背景を閉じる

モーダルを開く

jQuery('.js-open-button').on('click', function(e) {
    e.preventDefault();
    var target = jQuery(this).data('target');
    jQuery(target).show();
});

手順

HTML

1.　js-open-button をプライバシーに設定する

2.　target-modal はモーダル全体と黒背景に設定済み

3.　data-target=".target-modal" をプライバシーに設定する
→　data-…=".取得したいclass"


jQuery

1.　e.preventDefault(); でaタグ特有のページ遷移を無効化

2.　 .data('target') で 変数 target に値を代入
→　値 = .target-modal

3.　.show() でモーダルと黒背景を開く

まとめ

今回はモーダルを作りました。

モーダル自体は中級編のDAY6で作成したことはあったのですが、それでもうまくいかず最終的には動画を見ながら作成しました。

次は中級編の総復習らしいので今までの経験が活かせるように頑張りたいです！

カテゴリー
中級編

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事
デイトラweb制作中級編　DAY28
2022年6月22日
次の記事
デイトラweb制作中級編　DAY30~32①
2022年6月26日