使用jQuery实现，点击显示弹框，背景虚化，点击空白处，弹框消失

本文介绍如何利用jQuery实现点击元素后显示弹框，并使背景虚化。当用户点击弹框外的空白区域时，弹框将自动消失。主要涉及jQuery的选择器、事件绑定和阻止冒泡等技巧。

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

1、HTML的代码

<div class="layer" id="back" style="display: none; position:absolute; width:100%; height: 100%; top: 0; left: 0; z-index: 2; background: rgba(255, 255, 255, .6);" disabled="disabled"></div>   <!-- 虚化层 -->

    <div class="container">
        <div id="showRename" style="display:none; width:30%; position:absolute; top: 300px; left: 380px;box-shadow: 0 0 5px #ccc;z-index: 9;">   <!-- 要显示的 -->
            <div class="input-group" >
                <input type="text" id="oldname" class="form-control" />
                <span class="input-group-addon" onclick="getValue()">重命名</span>
            </div>
            <input type="hidden" id="newname" class="form-control">
        </div>

<a href="javascript:void(0);" class="btn" id="renameClick" >重命名</a>   <!-- 点击它显示 -->

2、js代码

$("#renameClick").click(function(e) {
            e.stopPropagation();   // 阻止冒泡
            $('#back').css("display", "block");   // 显示
            $("#showRename").css("display", "block");

            $("#back").bind("click", function(e) {   // 相当于点击空白消失
                $('#back').css("display", "none");
                $("#showRename").css("display", "none");
            });
        });

3、效果