jQuery点击自身以外地方关闭弹出层的简单实例

以下是一个使用jQuery实现的简单实例，用于在用户点击弹出层以外的任何地方时关闭该弹出层。

首先，假设你的弹出层有一个特定的类名，例如`popup`。

<!-- 假设这是你的弹出层 -->
<div class="popup" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); border:1px solid #ccc; padding:20px; background-color:white;">
    这是弹出层内容
</div>

<!-- 页面上的其他内容 -->
<p>点击这里不会关闭弹出层</p>
<button>点击这个按钮显示弹出层</button>

$(document).ready(function(){
    // 假设点击按钮显示弹出层
    $('button').click(function(){
        $('.popup').show(); // 显示弹出层
    });

    // 点击页面任何地方（除了.popup自身）时关闭弹出层
    $(document).click(function(e) {
        if (!$(e.target).closest('.popup').length) {
            $('.popup').hide(); // 如果点击的不是.popup或其子元素，则隐藏弹出层
        }
    });

    // 防止点击弹出层时触发document的click事件
    $('.popup').click(function(e){
        e.stopPropagation(); // 阻止事件冒泡
    });
});

这段代码首先监听按钮的点击事件来显示弹出层。然后，它监听整个文档的点击事件，并检查点击的目标元素是否是`.popup`或其子元素。如果不是，则隐藏弹出层。最后，它阻止`.popup`内部的点击事件冒泡到`document`上，这样点击弹出层本身时就不会触发隐藏弹出层的逻辑。