模態框：固定位置學習

霸霸晧發表於2024-05-31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模態框：固定位置</title>
</head>
<body>
    <!-- 頁首 -->
    <header>
        <h2> 我的墳墓 </h2>
        <button>進入</button> 
    </header>

    <div class="modal"></div>
         <!-- 遮罩 -->
         <div class="modal-backdrop">

         <!-- 彈層主體 -->
         <div class="modal-body">
        
            <!-- 關閉按鈕 -->
            <button class="close">退出</button>
            <!-- 登入表單 -->
         <div action="" method="post"></div>
         <table>
            <caption>拜訪者登入</caption>
            <tr>
                <td><label for="email">暗語</label></td>
                <td><input type="email" name="email" id="email"></td>
            </tr>
            <tr>
                <td><label for="password">金鑰</label></td>
                <td><input type="password" name="password" id="password"></td>
            </tr>
            <tr>
                <td colspan="2"><button style="width: 18em;">進入</button></td>
            </tr>
         </table>
         </div>
         <script>
          const btn = document.querySelector("header button");
          const modal = document.querySelector(".modal");
          const close = document.querySelector(".close");

          btn.addEventListener("click",setModal, false);
          close.addEventListener("click",setModal, false);
          function setModal(ev){
            ev.preventDefault();
            let status = window.getcomputedstyle(modal, null).getPropertyValue("display");
            modal.style.display = status === "none" ? "block" : "none";  
          }
            </script>
</body>
</html>

2.modal.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    /* min-width: 980px; */
}

header{
    background-color: lightcoral;
    padding: 上下 左右;
    padding: 0.5em 2em;
    overflow: hidden;
}

header h2{
    float: left;
}
header button {
    float: left;
    width: 10em;
    height: 3em; 
}
header button :hover{
    background-color: aqua;
    cursor: pointer;
}
/* 重點，模態框 */
/* .modal{
    width: 100vw;
    height: 100vh;
    position: relative;
} */

/* 遮罩 */
.modal .modal-backdrop{
    /* 固定定位總是相對於html，這樣就省去像絕對定位需要一個定位元素當父級的麻煩 */
    position: fixed; 
    /* position: relative; */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0,0, 0.5);
}

.modal .modal-body {
    border: 1px solid;
    padding: 1em;
    min-width: 400px;
    background-color: bisque;

    position: fixed;
    top: 5em;
    left: 30em;
    right: 30em;

}
.modal .modal-body form{
    width: 428px;

}
.modal .modal-body form caption{
    font-weight:bolder;
    margin-bottom :1em;
}

.modal .modal-body form td {
    padding: 8.5em;
}
.modal .modal-body form table td:first-of-type {
    width: 5em;
}
.modal .modal-body form input {
    width: 128%;
    height: 2em;
}
.modal {
    position: relative;
}
.modal .modal-body .close {
    position: absolute;
    right: 1em;
    width: 4em;
    height: 2em;
}
.modal button:hover {cursor: pointer;background-color: #fff;
}    

/* 初始化應該將彈層隱藏起來 */
.modal{
    display: none;
}

相關文章