JS:模态窗

最新推荐文章于 2023-10-12 22:05:13 发布

一染星辰

最新推荐文章于 2023-10-12 22:05:13 发布

阅读量201

点赞数

分类专栏： javascript试题文章标签： css html5 html 前端 javascript

本文链接：https://blog.csdn.net/weixin_59519449/article/details/120274106

版权

javascript试题专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本文详细探讨了如何使用JavaScript，结合HTML和CSS，创建功能丰富的模态窗口。内容包括模态窗口的基本结构、显示与隐藏的逻辑控制、以及自定义样式和交互效果的实现。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .btn {
            padding: 2px 4px;
            border: none;
            color: white;
            cursor: pointer;
            background: pink;
        }
        .wrap {
            width: 200px;
            height: 300px;
            padding: 20px;
            display: none;
            position: fixed;
            left: 40%;
            top: 20%;
            background: white;
            border-radius: 10px;
        }
        .mask {
            width: 100%;
            /* height: 100%; */
            height: 100vh;
            position: fixed;
            left: 0%;
            top: 0%;
            opacity: 0.3;
            display: none;
            background: black;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <button class="btn" type="button" onclick="loginFn()">点击登录</button>
        </div>
        <!-- 遮罩层 -->
        <div class="mask"></div>

        <div class="wrap">
            <div>
                <label>
                    手机号: <input type="text" placeholder="请输入手机号">
                </label>
            </div>
            <div>
                <label>
                    验证码: <input type="text" placeholder="请输入验证码">
                </label>
            </div>
            <button type="button" onclick="loginFn1()">登录</button>
            <button type="button" onclick="closeFn()">关闭</button>
        </div>
    </div>

    <script>
        // 获取dom
        var mask = document.querySelector('.mask')
        var wrap = document.querySelector('.wrap')
        var inps = document.querySelectorAll('input')

        // 登录的点击事件
        function loginFn() {
            mask.style.display = 'block'
            wrap.style.display = 'block'
        }

        function closeFn() {
            mask.style.display = 'none'
            wrap.style.display = 'none'
        }

        function loginFn1() {
            // 判断手机号和验证码不能为空
            // // if (inps[0].value != '' && inps[1].value != '') {
            // if (inps[0].value && inps[1].value) {
            //     alert(`${inps[0].value}--------${inps[1].value}`)
            // // } else if (inps[0].value == '') {
            // } else if (!inps[0].value) {
            //     alert('请输入手机号')
            // } else if (inps[1].value == '') {
            //     alert('请输入验证码')
            // }


            if (inps[0].value == '') {
                alert('请输入手机号')
                return
            } else if (inps[1].value == '') {
                alert('请输入验证码')
                return
            }
            alert('添加成功')
        }
    </script>
</body>
</html>