jQuery Overlay 仅关注特定 div。请问没有插件吗？

Question

我正在尝试使用 jQuery 实现模式叠加。

当用户单击特定按钮时，必须打开弹出 div。页面的其余部分应呈灰色。换句话说，除了这个弹出窗口之外，页面上的任何内容都不能被选择或单击。

如何才能实现这一目标？

我写了以下内容：代码，结果是此处

我无法只关注 div。对我来说，背景也是活跃的。如何禁用弹出 div 以外的区域？

HTML:

<div id="mainContainer">
  I am in the main body section.               
</div>
<input type="button" value="Show Overlay" id="btn">        
<div id="overlayContainer">
    I am in the Overlay Section<span style="float:right"><a class="alink" href="javascript:void(0);">X</a></span>
</div>

JS:

$(function() {
    $("#btn").click(function() {
        $("#overlayContainer").fadeIn();
        $("#mainContainer");
    })
    $(".alink").click(function() {
        $(this).parent().parent().hide();
    });
})

CSS:

#mainContainer{border:2px solid red;width:700px;height:500px;margin:0 auto;}
#overlayContainer{background:#c0c0c0;width:300px;height:400px;right:500px;border:2px dotted blue;margin-top:-460px;display:none;position:fixed;}
input{text-align:center;margin-left:300px;margin-top:18px;position:fixed;}

Answer 1

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

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

http://jsfiddle.net/AMM2M/5/

并且这是您的无插件答案：

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

http://jsfiddle.net/AMM2M/6/

<div class="popup">
    <div class="overlay"></div>
    <div class="content">
        popup content here
    </div>
</div>

.popup {
    display: none;
}
.popup .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: 90;
}
.popup .content {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 400px;
    width: 300px;
    margin-left: -150px;
    margin-top: -200px;
    background: #fff;
    z-index: 91;
}

$(".popup").show();

^{通过我的 Windows 7 手机回答< /sup>}

Answer 2

这是您的想法吗？

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

<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>

CSS

#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%;
}

如果不让我知道我会尽力帮助你。如果您需要任何有关 jQuery 的解释，请告诉我。

Answer 3

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