jQuery Overlay仅关注特定的div.没有插件吗? [英] jQuery Overlay to focus on a particular div only. No Plugins please?

问题描述

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

I am trying to achieve a modal overlay using jQuery.

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

When a user clicks on a particular button the popup div has to open up. The rest of the page should be grayed out. In other words nothing on the page can be selected or clicked other than this pop up.

如何实现?

我写了以下文章: CODE ，结果是

I have written the follwing: CODE and result is HERE

我不能只专注于div.对我来说，背景也很活跃.如何禁用除弹出div以外的区域?

I am not able to focus only on the div. For me the background is also active. How do I disable the area other than the pop up 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;}

推荐答案

您不要求插件，但随后标记了您的问题 jquery-ui ，它本身是一个插件.首先，这是您的jQuery-UI答案:

You asked for no plugins, but then tagged your question jquery-ui, which is itself a plugin. First, here's your jQuery-UI answer:

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

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

这是您的无插件答案:

使用叠加层div覆盖整个页面，然后在其上放置一个弹出div.要显示弹出窗口，请显示并隐藏公共容器.

Cover the entire page with an overlay div, then place a popup div over that. To display the popup, show and hide a common container.

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手机上获得了答案}

这篇关于jQuery Overlay仅关注特定的div.没有插件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！