JQuery Overlay - wrapInner method_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-19 22:05 出处：网络

I am trying to create an overlay for a div. I am attempting to accomplish this using JQuery. This what the JS looks like:

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

Update: This is the markup before the JS function is applied:

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

This seems to manipulate the 'container' div in a way I would not have expected. This is what the markup looks like after the wrapInner method is run:

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

It is as if the wrapInner method has striped the container div of its attributes. Can someone suggest to me a better way of doing this?

Thanks..

The call to "wrapInner" returns the jQuery object that you created with $('#container'), not the div that wraps the container. Try this:

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

[edit] actually I have no idea what you expect to happen so I'm not sure whether my example makes any sense.

[edit again] OK if you want to wrap the container then you don't want to use "wrapInner()". Just use "wrap", and then call .parent() and add your CSS and "id" value.

The Wrap() method is what I needed

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

Update:

In the end it decided to not wrap the container div with the overlay. The styling was getting tricky so I just decided to make the overlay div a sibling of container and then position it over the container. I am using offset values of the container to do this.

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" });