javascript - How to control css of images on top of a full page semi-transparent overlay div -
i've got full page overlay covering page on load. script have attached close if clicked. purpose of overlay instructional page, have transparent .png images want anchor different areas of page.
i have on listed example below, want have full opacity , spacing away top left corner of page... when load it, set .4 transparency , jammed upper left corner. i'm no css expert, , have been spinning wheels this. can 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>
i remove html , css javascript make more maintainable.
here 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 overlay changed opacity rgba since opacity affects content inside. rgba not supported in browsers can have fallback transparent png, modernizr great support checks. removed height setting on overlay , set left right bottom , left 0. can change home_text positioning liking unsure how should made red box.
here html:
<div id="overlay"> <div id="home_text"> <!-- image --> </div> </div>
here cleaned js:
$(function () { var $overlay = $('#overlay'); $overlay.on('click', function (e) { $overlay .hide() .off(); }); });
the off method removes event.
an example of can seen here: http://jsfiddle.net/shbxd/1/
Comments
Post a Comment