JavaScript 系列三：練習3

modal 互動視窗元件

by applelily

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列三：練習3 ── modal 互動視窗元件</title>
    <link rel="stylesheet" href="./js_modal.css">
</head>
<body>
    <button class="btn-login" onclick="loginModal()">點我登入帳號</button>
    <hr>
    <button class="btn-post" onclick="postModal()">點我新增貼文</button>
    <div class="modal_wrap">
        <div class="modal" id="login-modal">
            <h1>Login</h1>
            <div>帳號：
                <input type="text">
            </div>
            <div>密碼：
                <input type="password">
            </div>
            <hr>
            <button id="btn-close-login" class="btn-close">關閉
            </button>
        </div>
        <div class="modal" id="post-modal">
            <h1>Post</h1>
            <div>標題：<input type="text"></div>
            <div>內文：<textarea></textarea></div>
            <hr>
            <button id="btn-close-post" class="btn-close">關閉</button>
        </div>
    </div>

</body>
<script src="./js_modal.js"></script>
</html>

CSS

.btn-login, .btn-post{
    margin: 30px auto;
    padding: 10px 15px;
    font-size: 16px;
}
.btn-login {
    border: 2px solid #ffc0cb;
    background-color: #f6a3a3;
}
.btn-post{
    border: 2px solid #58a05c;
    background-color: #59855e;
}
.btn-login:hover, .btn-post:hover{
    cursor:pointer
}
.btn-login:active   , .btn-post:active{
    scale: 90%;
}
.modal_wrap{
    display:none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    animation: showModal 1s ease-out forwards; /* 新增動畫 */
}

/* 定義動畫規則 */
@keyframes showModal {
    from {
        opacity: 0; /* 從透明度 0 開始 */
    }
    to {
        opacity: 1; /* 透明度達到 1 */
    }
}


#login-modal,#post-modal {

    max-width: 375px;
    min-height: 445px;
    background-color: #242424;
    color:#F2F2F2;
    margin: auto;
    padding : 20px 20px 0px 40px;
    border: 1px solid #888;
    border-radius: 10px;
    line-height: 4.5em;
    font-size: 18px;
}
input{
    width: 200px;
    height: 35px;
    border-radius: 20px;
    padding-left: 15px;
}

#btn-close-login{
    background-color: #f6a3a3;
    color:#242424;
    font-size: 16px;
    width: 55px;
    margin-left:80%
}

#post-modal{
    padding : 20px 20px 0px 40px;
    line-height: 4.5em;
}
#post-modal input{
    width: 250px;
    border-radius:0px;
    padding-left: 6px;
}

textarea{
    min-height: 200px;
    width: 250px;
    padding: 6px;
}
#login-modal h1 {
    color: #f6a3a3;
}

#post-modal h1 {
    color: #59855e;
}


#btn-close-post{
    background-color: #59855e;
    color:#242424;
    font-size: 16px;
    width: 55px;
    margin-left:80%
}

JavaScript

let block_modal = document.querySelectorAll('.modal');
// 初始化class:modal, 設定 全部 modal 的 display: none
function init_block_modal(){
    block_modal.forEach(
        function(modal){
            modal.style.display="none";
        }
    )
}

let elem_modal_wrap =
document.querySelector('.modal_wrap');

function close_modal(btn){
    btn.onclick= function(){
      elem_modal_wrap.style.display="none"  ;
    }
}
function loginModal(){
    elem_modal_wrap.style.display="block";
    let block_login = document.querySelector('#login-modal');
    init_block_modal();
    block_login.style.display="block";
    let btn = document.querySelector('#btn-close-login');
    close_modal(btn);
}


function postModal(){
    elem_modal_wrap.style.display="block";
    let block_post = document.querySelector('#post-modal');
    init_block_modal();
    block_post.style.display="block";
    let btn = document.querySelector('#btn-close-post');
    close_modal(btn);
}