0

我在使用 jquery 生成的 div 时遇到问题。我基本上是在尝试进行叠加，但仅限于特定的 div。

这是我的代码：

文字...文字...还有更多文字

我的jQuery：

function addOverlay() {
    var overlayExist = $('body').find('#container-that-needs-overlay');

    if (overlayExist.length == 0) {
        var overlay = '<div class="span12" id="overlay" style="margin-left:-20px;">' +
            '<div class="overlay-text-inside-container">This is text I need over the overlay</div>' +
            '<div id="overlay-background"></div>' +
            '</div>';
        jQuery('#form-container').after(overlay);

        var inputContainer = $('#_new-form-input');
        var position = $('#_new-form-input').offset();
        $('#overlay').css({ position: "absolute", left: position.left, top: position.top, width: inputContainer.width() + 20, height: inputContainer.height() });

    }
}

CSS：

#overlay-background
{
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    height:inherit;
    width:inherit;
}

.overlay-text-inside-container
    {
        font-size:large;
        width:50%; 
        height:50%;
        top:50%;
        position: relative;
        text-align:center; /*ultimately centers text*/
        color:White;
    }

现在我的问题是生成了覆盖，但它看起来像这样

-----------------------div that needs overlay----------------------------------------

 (empty space)
 (empty space) 
 (empty space)
 (empty space)

**************this is where the overlay color starts (id="overlay-background")********
This is text I need over the overlay /////////////////////////////////
/////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////

-----------------------end of div that needs overlay----------------------------------
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////

***************this is where the overlay color ends **********************************

现在我只是想弄清楚如何将背景推到主 div 的顶部。同时将文本在背景上垂直和水平居中。另外，我放入 2 个 div 的原因是因为如果我将所有 css 放在主覆盖 div 上，文本将继承背景的透明度。所以我认为把它们分开就可以了。

谢谢！！

编辑小提琴：

http://jsfiddle.net/6rgMj/

我似乎无法让它弹出来。

更新：修复它！

http://jsfiddle.net/6rgMj/2/

4

1 回答 1

1

在这里你得到了更新的 jsFiddle：http: //jsfiddle.net/6rgMj/1/

我已经添加z-index了属性，.overlay-text-inside-container并且这个属性将那个元素带到了上面#overlay-background。

我还更改onclick了您元素中的属性a，这是一个糟糕的栖息地。您应该尽量避免在 HTML 属性中使用 JavaScript 事件，因为这可能会导致将来代码维护出现问题。

我不确定这是否就是您所要求的，但如果不是，我会更新我的答案。

于 2013-08-30T13:37:54.213 回答