Question

我正在尝试为div创建叠加层。我试图使用JQuery实现这一目标。这就是JS的样子：

 $('#container').wrapInner('<div />')
        .css('opacity', '0.5')
        .css('z-index', '2')
        .css('background','black')
        .attr('id','overlay')
    }
};

更新：这是应用JS函数之前的标记：

<body>
<form id="form1" runat="server">
<div id="header">My Header</div>
<div id="container">Container</div>
<div id="menu">
 <input type="text" />
 <input type="button" class="button" value="Go" onclick="overlay.toggleOverlay();return true" />        
</div>  
</form>

这似乎以我不希望的方式操纵'容器'div。这就是运行wrapInner方法后标记的样子：

<div id="overlay" style="z-index: 2; filter: alpha(opacity=50); ZOOM: 1; background: black;">
<div>ContainerDiv</div>
</div>

就好像wrapInner方法已经对其属性的容器div进行了条带化。有人可以告诉我一个更好的方法吗？

谢谢..

Answer 1

对“wrapInner”的调用返回使用$（'＃container'）创建的jQuery对象，而不是包装容器的div。试试这个：

 $('#container').wrapInner('<div />').children()
    .css(/* ... */)
    .css(/* ... */)
    .attr('id', 'overlay');

[编辑]实际上我不知道你期望发生什么，所以我不确定我的例子是否有意义。

[再次编辑]如果你想包装容器那么你不想使用“wrapInner（）”。只需使用“wrap”，然后调用.parent（）并添加CSS和“id”值。

Answer 2

我需要Wrap（）方法

 $('#container').wrap("<div id='overlay'> </div>")
        .css('opacity', '0.5')
        .css('z-index', '2')
        .css('background','black')

<强>更新

最后，它决定不用叠加层包装容器div。样式变得棘手，所以我决定让overlay div成为容器的兄弟，然后将它放在容器上。我正在使用容器的偏移值来执行此操作。

var left = $("#container").offset().left;
        var top = $("#container").offset().top;
        var width = $("#container").outerWidth();
        var height = $("#container").outerHeight();
        $("#overlay").css({ "left": left + "px", "top": top + "px", "width": width + "px", "height": height + "px", "opacity": "0.5" });

JQuery Overlay - wrapInner方法

2 个答案: