固定定位 | 绝对定位 | 自定义模态框

固定定位 | 绝对定位 | 自定义模态框 | 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)