jq写弹窗

webhhhhhh

已于 2024-01-31 17:26:46 修改

阅读量99

点赞数

CC 4.0 BY-SA版权

文章标签： jquery javascript

于 2021-06-23 09:37:55 首次发布

本文链接：https://blog.youkuaiyun.com/webhhhhhh/article/details/118143685

本文介绍了如何使用jQuery编写一个简单的弹窗功能，包括创建遮罩层和可关闭的对话框，适合初学者了解前端交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jq写弹窗

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* wai作为遮罩层 */
        .wai {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(213, 127, 127, 0.6);
            z-index: 1;
            transition: 2s;
        }

        /* wai_contain弹框面版 */
        .wai_contain {
            position: fixed;
            top: 15%;
            left: 50%;
            margin-left: -25%;
            width: 45%;
            height: 70%;
            z-index: 2;
        }
    </style>
</head>

<body>
    <button id="tanchuang_show">弹窗</button>
    <!-- 弹窗 -->
    <div class="wai">
        <div class="wai_contain">
            <div class="wai_body">
                <div class="wai_main">

                    <p>请输入您的建议：</p>
                    <input type="text" class="advice">
                </div>
                <button class="ok">确定</button>
                <button class="cancel">取消</button>
            </div>
        </div>

    </div>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script>
        // 打开弹窗
        $("#tanchuang_show").click(function () {
            $(".wai").show()
        })

        // 点击取消关闭弹窗
        $(".cancel").click(function () {
            $(".wai").hide()
        })
    </script>
</body>

</html>

结果：
在这里插入图片描述