Question

我遇到了jquery生成的div问题。我基本上试图制作叠加层，但仅限于特定的div。

这是我的代码：

text ... text ...以及更多文本

我的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/

Answer 1

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

我已将z-index属性添加到.overlay-text-inside-container，此属性会将该元素置于#overlay-background之上。

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

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

由jquery生成的div里面的css center div

1 个答案: