Javascript jqueryoverlay只关注特定的div。没有插件吗？

我正在尝试使用jQuery实现模式覆盖

当用户单击特定按钮时，弹出div必须打开。页面的其余部分应灰显。换句话说，除了此弹出窗口外，无法选择或单击页面上的任何内容

这怎么可能实现呢

我写了下面的话：结果是

我不能只关注div。对我来说，背景也很活跃。如何禁用弹出分区以外的区域

HTML:

Css:

---

Yuo可以在覆盖层下方添加一个额外的灰色层，透明度为50%拉伸至100%大小。

Yuo可以在覆盖层下方添加一个额外的灰色层，透明度为50%拉伸至100%大小。

这是您的想法吗

jquery部分

$(document).ready(function() {

    $('#lightbox_button').click(function() {
         $('#lightbox').fadeIn('slow');
         $('#lightbox_panel').fadeIn('slow');
    });

    $('#close_lightbox').click(function() {
        $('#lightbox').fadeOut('slow');
        $('#lightbox_panel').fadeOut('slow');
    });

});

HTML

如果没有，请告诉我，我会尽力帮你的。如果您需要关于jQuery的任何解释，请告诉我

你是这么想的吗

jquery部分

$(document).ready(function() {

    $('#lightbox_button').click(function() {
         $('#lightbox').fadeIn('slow');
         $('#lightbox_panel').fadeIn('slow');
    });

    $('#close_lightbox').click(function() {
        $('#lightbox').fadeOut('slow');
        $('#lightbox_panel').fadeOut('slow');
    });

});

HTML

---

如果没有，请告诉我，我会尽力帮你的。如果您需要关于jQuery的任何解释，请告诉我

您没有要求任何插件，但随后标记了您的问题，这本身就是一个插件。首先，以下是您的jQuery UI答案：

$("#overlayContainer").dialog({ modal: true });

以下是您的无插件答案：

用覆盖div覆盖整个页面，然后在上面放置一个弹出div。要显示弹出窗口，请显示和隐藏公用容器

此处弹出内容

.popup{
显示：无；
}
.popup.overlay{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：#fff；
不透明度：0.5；
过滤器：α（不透明度=50）；
z指数：90；
}
.popup.content{
位置：绝对位置；
最高：50%；
左：50%；
高度：400px；
宽度：300px；
左边距：-150px；
利润上限：-200px；
背景：#fff；
z指数：91；
}

$（“.popup”）.show（）；

---

在我的Windows 7手机上回答

您没有要求任何插件，但随后标记了您的问题，这本身就是一个插件。首先，以下是您的jQuery UI答案：

$("#overlayContainer").dialog({ modal: true });

以下是您的无插件答案：

用覆盖div覆盖整个页面，然后在上面放置一个弹出div。要显示弹出窗口，请显示和隐藏公用容器

此处弹出内容

.popup{
显示：无；
}
.popup.overlay{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：#fff；
不透明度：0.5；
过滤器：α（不透明度=50）；
z指数：90；
}
.popup.content{
位置：绝对位置；
最高：50%；
左：50%；
高度：400px；
宽度：300px；
左边距：-150px；
利润上限：-200px；
背景：#fff；
z指数：91；
}

$（“.popup”）.show（）；

---

通过我的Windows 7手机回答

谢谢这确实是最好的解决方案，但我是来学习的。你能帮我编辑一下吗。它继续不断地追加div，我尝试使用empty（），但这也删除了我背景div中的所有文本。实际上：@Mike-很抱歉，我刚才才看到你的评论。透明div被粘住的原因是您正在创建具有相同id的多个div（这是不允许的）。使用

$（“#透明”）

时，仅选择第一个，因此仅删除第一个。您可以使用

class

而不是

id

来解决此问题。谢谢，这确实是最好的解决方案，但我在这里学习。你能帮我编辑一下吗。它继续不断地追加div，我尝试使用empty（），但这也删除了我背景div中的所有文本。实际上：@Mike-很抱歉，我刚才才看到你的评论。透明div被粘住的原因是您正在创建具有相同id的多个div（这是不允许的）。使用

$（“#透明”）

时，仅选择第一个，因此仅删除第一个。您可以使用

class

而不是

id

来解决此问题。

<div id="wrapper">

<a href="#" id="lightbox_button">
    <div class="button">button</div>
</a>

    <div id="lightbox_panel">

        <h1>lightbox panel</h1>

        <a href="#" id="close_lightbox">
            <div class="button">close</div>
        </a>

    </div>

</div>

<div id="lightbox"></div>

#lightbox_panel 
{ 
   position: relative;
   z-index: 99; 
   width: 500px;
   height: 100px; 
   margin: 30px auto 0;
   background-color: #CCC;
   display: none;
   padding: 10px;
}

#lightbox 
{ 
   z-index: 90;
   position: absolute;
   background-color: #000;
   opacity: 0.8;
   filter: alpha(opacity=80);
   width: 100%;
   height: 100%;
   display: none;
   top: 0;
}

.button 
{ 
   position: absolute;
   text-decoration: none; 
   padding: 2px 10px; 
   border: 1px solid #000;
   display: inline-block; 
   bottom: 10px;
   left: 50%;
}

$("#overlayContainer").dialog({ modal: true });