JSFiddle - React, Tailwind, and code Playground

by ZooeyLai

HTML

<div id="app" class="wrap">
        <button onclick="loginModal()" class="btn btn-primary">點我登入帳號</button>
        <hr>
        <button onclick="postModal()" class="btn btn-primary">點我新增貼文</button>
        
        
        <div class="modal hidden" id="login-modal">
            <div class="flex">
                <div class="form-group">
                    <label for="user" class="form-label">帳號：</label>
                    <input type="text" id="user" class="form-input">
                </div>
                <div class="form-group">
                    <label for="pwd" class="form-label">密碼：</label>
                    <input type="password" id="pwd" class="form-input">
                </div>
                <hr>
                <button class="btn-close btn btn-primary" onclick="closeBtn()">關閉</button>
            </div>
        </div>

        <div class="modal hidden" id="post-modal">
            <div class="flex">
                <div class="form-group">
                    <label for="pwd" class="form-label">標題：</label>
                    <input type="text" id="title" class="form-input">
                </div>
                <div class="form-group">
                    <label for="pwd" class="form-label">內文：</label>
                    <textarea class="form-input"></textarea>
                </div>
                <button class="btn-close btn btn-primary" onclick="closeBtn()">關閉</button>                
            </div>
        </div>
        <div class="overlay hidden"></div>
    </div>

CSS

@-webkit-keyframes fadeIn {
        from {opacity: 0} 
        to {opacity: 1}
    }

    @keyframes fadeIn {
        from {opacity: 0} 
        to {opacity: 1}
    }
    :root{
        --primary: #4f46e5;
        --secondary:#2563eb;
        --secondary100: #dbeafe;
        --gray800: #333;
        --white: #fff;
        --background:#e4e4e4;
        --warning100 :#ffedd5;
        --warning : #ea580c;
        --danger100 :#fee2e2;
        --danger : #dc2626;
        --success : #059669;
        --success100: #ecfdf5;
    }
    * {
        /* margin: 0;
        padding: 0; */
        box-sizing: border-box;
        font-family: "Inter", sans-serif;
    }
    body{
        color: #222;
        position: relative;
        min-height: 100vh;
    }

    .form-group{
        margin-bottom: 1rem;
        display: flex;
        flex-flow: column;
    }
    .form-label{
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }
    .form-input{
        border: 1px solid #94a3b8;
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
        flex: auto;
        margin-right: 1rem;
    }
    .form-input:focus{
        border-color: var(--primary);
        box-shadow: 0px 0px 0px 3px rgb(79 70 229 / 40%);
        outline: none;
    } 
    .btn{
        padding: 0.5rem 1rem;
        border: 2px solid transparent;
        border-radius: 0.25rem;
        background-color: var(--gray);
        color: #475569;
        cursor: pointer;
    }
    .btn:hover{
        transform: scale(1.05);
        transition: all 0.3s;
    }    
    .btn-primary{
        background-color: var(--primary);
        color: var(--white);
    }
    .btn-primary:hover{
        background-color: #3730a3;
    }    

    .modal{
        width: 400px;
        background: #fff;
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 0.5rem;
        position: absolute;
        top: 30%;
        left: 50%;
       ...

JavaScript

let modalLogin = document.querySelector('#login-modal');
        let modalPost = document.querySelector('#post-modal');
        let overlay = document.querySelector('.overlay');
        let closeModalBtn = document.querySelector('.btn-close');
        let modals = document.querySelectorAll('.modal');

        // 登入彈窗
        function loginModal(){
            modalLogin.classList.remove('hidden');
            overlay.classList.remove('hidden')
        };
        // 發布彈窗
        function postModal(){
            modalPost.classList.remove('hidden');
            overlay.classList.remove('hidden')
        };

        // 關閉按鈕
        function closeBtn(){
            event.target.closest('.modal').classList.add('hidden');
            overlay.classList.add('hidden')
        }
        // 遍歷所有彈窗，在點擊overlay時關閉所有彈窗(forEach)
        modals.forEach((modal) =>{
            overlay.addEventListener('click', ()=>{
                overlay.classList.add('hidden');
                modal.classList.add('hidden');
            })
        })