基本的なモーダルの実装方法

この記事は、基本的なモーダルの実装方法について解説します。初見では難しそうに感じるかもしれませんが、意外と簡単に実装できるのでぜひ最後までご覧になって挑戦してみてください。

以下に詳しく解説していきます。

HTML
Sass
jQuery
まとめ

HTML

以下がHTMLのコードです。

  <div id="modal-btn"></div>  
　<div class="l-modal" id="modal">
    <div class="l-modal__icon-wrapper id="modal-cancel">
      <img src="asset/img/Group.svg" alt="" class="l-modal__icon">
    </div>
    <form action="" class="l-modal__form" id="modal">
      <div class="l-modal__input-list">
        <div class="l-modal__input-wrapper">
          <label for="mail" class="l-modal__label">メールアドレス</label>
          <input id="mail" type="email" name="mail" class="l-modal__input"placeholder="例） example@example.com">
        </div>
        <div class="l-modal__input-wrapper">
          <label for="password" class="l-modal__label">パスワード</label>
          <input id="password" type="password" name="password" class="l-modal__input">
        </div>
      </div>
      <button class="l-modal__btn" type="submit">ログイン</button>
    </form>
  </div>

かなり量が多いコードですが、重要なのはidを付与している部分なのでその他の部分はあまり気にしないでも大丈夫です。

Sass

今回は、Sassを使用しています。Sassを使用してことがない方は以下の記事をご覧ください。

.l-modal{
    padding: 2rem;
    background-color: #FFFFFF;
    display: none;
    grid-template-rows: auto auto auto;
    max-width: 50rem;
    width: 100%;
    box-shadow: 0px 3px 6px 0px #00000029;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;

    &__icon-wrapper{
        width: 2.1rem;
        height: 2.1rem;
        justify-self: end;
    }

    &__icon{
        width: 100%;
    }

    &__form{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 3.4rem;
        margin-bottom: 5.5rem;
    }

    &__input-list{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 2.9rem;
    }

    &__input-wrapper{
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        gap: 1.1rem;
    }

    &__label{
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 1.5em;
    }

    &__input{
        border: 1px solid #DCDFE6;
        border-radius: 0.4rem;
        font-size: 1.6rem;
        height: 4rem;
        width: 100%;
    }

    &__btn{
        font-size: 1.4rem;
        font-weight: 700;
        color: cl.$c-white;
        line-height: 1.5em;
        background-color: #1E5099;
        padding: 0.8rem 3rem;
        border-radius: 0.4rem;
    }
}

.modal-active{
    display: grid;
}

.l-modal{
    padding: 2rem;
    background-color: #FFFFFF;
    display: none;

この部分でdisplay:none;を指定して最初は隠した状態にしておきます。

.modal-active{
    display: grid;
}

後ほど紹介するjQueryで、このクラスを付与した際に、表示されるようにします。

display:gridなのは、レイアウトの都合上使っているのでnone以外ならblockなどで構いません。

モーダルのレイアウトは部分はそこまで重要ではないので説明を省かせていただきます。

jQuery

    //モーダルを閉じる
    $("#modal-cancel").on('click',function(){
        $("#modal").removeClass("modal-active");
    });

    //モーダルを開く
    $("#modal-btn").on('click',function(){
        $("#modal").addClass("modal-active");
    });

それぞれのボタンで、クラスの追加と削除を行っています。

今回は、JQueryを使用していますが通常のJavaScriptでも簡単に実装できるので挑戦してみてください。