Home/ Questions/Q 598279
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T16:22:17+00:00

I am trying to create an overlay for a div. I am attempting to

  • 0

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" />
 <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..

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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