jQuery入門--モーダルウィンドウ

モーダルウィンドウ

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム
jQuery--2.2.4

【モーダルウインドウとは】
ユーザーに重要な情報やエラーメッセージを伝えるために表示されるウインドウの事。

【主な要素を用意する】
ブラウザを立ち上げる。

「index.html」

「style.css」ファイルにコードを書く

body {

    margin: 0;

}

.button {

    width: 100px;

    padding: 10px;

    /*左右の真ん中*/

    margin: 40px auto 0px;

    /*ボックスの角を丸くする*/

    border-radius: 5px;

    /*文字に関すること*/

    color:white ;

    font-weight: bold;

    text-align: center;

    /*カーソルの形*/

    cursor: pointer;

}

.open {

    background-color: blue;

}

.close {

    background-color: red;

}

 

【モーダルウィンドウを整える】
ブラウザを立ち上げる

「style.css」ファイルにコードを追加する
body {

    margin: 0;

}

.button {

    width: 100px;

    padding: 10px;

    /*左右の真ん中*/

    margin: 40px auto 0px;

    /*ボックスの角を丸くする*/

    border-radius: 5px;

    /*文字に関すること*/

    color:white ;

    font-weight: bold;

    text-align: center;

    /*カーソルの形*/

    cursor: pointer;

}

追加

.modal {

    /*親要素に対して*/

    width: 100%;

    /*ウインドウの高さと等しい*/

    height: 100vh;

    position: fixed;

    top: 0;

    left: 0;

}

.modal_bg {

    height: 100%;

    background-color: rgba(0,0,0,0.8);

}

.modal_window {

    width: 50%;

    height: 300px;

    border-radius: 5px;

    background-color: white;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    text-align: center;

}

.open {

    background-color: blue;

}

.close {

    background-color: red;

}

【初期設定する】

「style.css」ファイルを変更する

.modal {

    /*親要素に対して*/

    width: 100%;

    /*ウインドウの高さと等しい*/

    height: 100vh;

    position: fixed;

    top: 0;

    left: 0;
追加する

    /*非表示にする*/

    display: none;

}

h3 {

    margin-bottom: 200px;

}

【モーダルウィンドウを動作させる】

ブラウザを開き、OPENボタンを押すと、モーダルウィンドウが動作するようにする

「modal.js」にコードを書く

$(function(){

   //モーダルウィンドウをふわっと開く

    $(".open").click(function(){

        $(".modal").fadeIn();

    });

//モーダルウィンドウをふわっと閉じる

    $(".close").click(function(){

       $(".modal").fadeOut();

    });

//モーダルウィンドウの周辺をクリックすると、ふあっと閉じる

    $(".modal_bg").click(function(){

       $(".modal").fadeOut();

    })

})

【スクロールするには】

「style.css」を書き換える

.modal_window {

    width: 50%;

    height: 300px;

    border-radius: 5px;

    background-color: white;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    text-align: center;

    /*スクロール*/

    overflow: scroll;

}

h3 {

    margin-bottom: 500px;

}