html之点击模态框边缘隐藏模态框

最新推荐文章于 2024-06-23 16:16:22 发布

原创最新推荐文章于 2024-06-23 16:16:22 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

HTML 专栏收录该内容

70 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及jQuery实现的模态框效果，通过点击按钮展示模态框，并可通过点击背景遮罩层或关闭按钮隐藏模态框。此方案适用于需要快速弹出对话框的应用场景。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框点击外部mask层消失</title>
    <style>
        .box{
            display: none;
        }
        .inner-box{
            border: 1px solid red;
            width: 300px;
            height: 300px;
            position: fixed;
            left: 50%;
            top: 50%;
            background: white;
            margin-left: -150px;
            margin-top: -150px;
            z-index: 9999;

        }
        .mask{
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: #3c3c3c;
            opacity: 0.3;
            filter: alpha(opacity=0.3);
            z-index: 9990;
        }
    </style>
    <script src="./jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            var $div = $('.box');
            var $btn = $('button');
            $btn.click(function () {
                $div.show();
                return false;//阻止冒泡
            });
            $(document).click(function () {
                $div.hide();
            });
            $('.inner-box').click(function () {
                return false;
            });
            $('a').click(function () {
                $div.hide();
            });
        })
    </script>
</head>
<body>
<div class="content">
    你好呀
    <button>点我</button>
</div>



<!--//模态框-->
<div class="box" id="box">
    <div class="inner-box">
        <a href=""><span>关闭</span></a>
    </div>
    <div class="mask"></div>
</div>

</body>
</html>