How to control css of images on top of a full page semi-transparent overlay div

Question

I've got a full page overlay covering my page on load. The only script I have attached to it is to close it if anything is clicked. The purpose of this overlay is instructional for the page, so I have some transparent .png images that I want to anchor to different areas of the page.

I have on listed as an example below, which I want to have full opacity and some spacing away from the top left corner of the page... however when I load it, its set to .4 transparency and its jammed into the upper left corner. I'm no css expert, and I have been spinning my wheels with this. Can anyone help?

<script language="javascript" type="text/javascript">

    $(function () {

        var docHeight = $(document).height();

        $("body").append("<div id='overlay'><div id='home_text'><img src='/images/overlay_test_home.png'></div></div>");

        $("#overlay")
      .height(docHeight)
      .css({
          'opacity': 0.4,
          'position': 'absolute',
          'top': 0,
          'left': 0,
          'background-color': 'black',
          'width': '100%',
          'z-index': 5000
      });

        $("#home_text")
      .css({
          'opacity': 1.0,
           'top' : 20,
           'left': 200
      });

        $('#overlay').click(function () {
            $("#overlay").hide();
        });

    });

</script>

Answer 1

I would remove all html and css from the javascript it will make it more maintainable.

Here is your css:

#overlay {
    background: rgba(0, 0, 0, .4);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}

#home_text {
    background: red;
    height: 300px;
    margin: 20px auto 0;
    width: 300px;
}

On the overlay I changed the opacity to rgba since opacity affects all content inside. Rgba is also not supported in all browsers so you can have a fallback transparent png, Modernizr is great for support checks. Also removed the height setting on overlay and set the left right bottom and left to 0. You can change your home_text positioning to your liking I was unsure how it should look so I made it a red box.

Here is your html:

<div id="overlay">
    <div id="home_text">
        <!-- your image -->
    </div>
</div>

Here is you cleaned up js:

$(function () {
    var $overlay = $('#overlay');
    $overlay.on('click', function (e) {
        $overlay
            .hide()
            .off();
    });
});

The off method removes that event.

An example of this can be seen here: http://jsfiddle.net/SHBXd/1/

Answer 2

Have you thought about using JQueryUI modal popup? You can hide the title and customise it to how you want. http://jqueryui.com/dialog/