固定定位 | 絕對定位 | 自定義模態框

固定定位 | 絕對定位 | 自定義模態框 | CSS

本文轉載自查看原文 2020-07-18 17:18 1079 CSS

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal</title>
    <style>
        body {
            font-family: Helvetica, Arial, sans-serif;
            margin: 0;  /* 去掉body默認的外邊框 */
        }
        /* 設置按鈕樣式 */
        button {
            padding: 0.5em 0.7em;
            border: 1px solid #8d8d8d;
            background-color: white;
            font-size: 1em;
        }

        /* 其他樣式 */
        .top-banner {
            padding: 1em 0;
            background-color: #ffd698;
        }

        .top-banner-inner {
            width: 80%;
            max-width: 1000px;  /* 設置段落最大寬度 */
            margin: 0 auto;
        }

        /* 隱藏模態框 */
        .modal {
            display: none;
        }
        /* 打開模態框 */
        .modal-backdrop {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0,0,0,0.5);  /* 半透明蒙層 1完全不透明 0完全透明 */
        }
        /* 給模態框定位 */
        .modal-body {
            position: fixed;
            top: 3em;
            bottom: 3em;
            right: 20%;
            left: 20%;
            padding: 2em 3em;
            background-color: white;
            overflow: auto;  /* 滾動條 */
        }
        /* 關閉按鈕選中手勢 */
        .modal-close {
            cursor: pointer;
            /* 絕對定位: 往上找定位元素(初始包含塊) */
            position: absolute;
            top: 0.3em;
            right: 0.3em;
            padding: 0.3em;
            cursor: pointer;

            /* 讓按鈕變成一個小方塊 */
            font-size: 2em;
            height: 1em;
            width: 1em;
            border: 0;

            /* 擠出文字並隱藏 */
            text-indent: 10em;
            overflow: hidden;
        }
        .modal-close::after{  /* 偽元素: ::after */
            position: absolute;
            line-height: 0.5;
            top: 0.2em;
            left: 0.1em;
            text-indent: 0;
            content: "\00D7"  /* 乘法符號 Unicode字符 */
        }
    </style>
</head>
<body>
    <header class="top-banner">
        <div class="top-banner-inner">
            <p>
                觸發彈窗按鈕
                <button id="open">Modal</button>
            </p>
        </div>
    </header>
    <div class="modal" id="modal">
        <div class="modal-backdrop"></div>
        <div class="modal-body">
            <button class="modal-close" id="close"></button>
            <h2>標題</h2>
            <p>
                摘要
            </p>
            <form action="">
                <p>
                    <label for="email"></label>
                    <input type="text" name="email">
                </p>
                <p>
                    <button type="submit">提交</button>
                </p>
            </form>
        </div>
    </div>
    <script>
        /*
        模態框樣式
        */
       // 打開模態框
       var open = document.getElementById("open");
       var close = document.getElementById("close");
       var modal = document.getElementById('modal')
       open.addEventListener('click', function(){
           event.preventDefault();
           modal.style.display = 'block';
       })
       close.addEventListener('click', function(){
           event.preventDefault();
           modal.style.display = 'none';
       })
    </script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端CSS - 相對定位,絕對定位,固定定位 QT 自定義模態對話框 [IOS] 自定義AlertView實現模態對話框 CSS固定定位實現右下角可關閉廣告 css屬性設置-顯示與隱藏、盒子陰影、固定定位 HTML+CSS：css定位詳解之相對定位、絕對定位和固定定位【CSS3】---層模型position之fixed固定定位、absolute絕對定位和relative相對定位絕對定位模擬固定定位效果... CSS之樣式屬性(背景固定、圓形頭像、模態框) 小程序模態對話框自定義組件(modal)