デイトラweb制作中級編 DAY29

モーダルを作る

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プロパティの種類 ↓

②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で作成したことはあったのですが、それでもうまくいかず最終的には動画を見ながら作成しました。

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

コメントを残す

メールアドレスが公開されることはありません。