Light off and Light On for Blogger

Light off and Light On for Blogger

by agus makmun

HTML

<div id="shadow"></div>
<div class='post-body'>
<button class="lightSwitcher">Turn off the lights</button>
<br />
<iframe width="815" height="420" src="//www.youtube.com/embed/TwUBFQ_2Xp0" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.lightSwitcher {position:absolute; z-index:101; background-image:url(light_bulb_off.png);background-repeat:no-repeat; background-position:left; padding: 0 0 0 20px; outline:none; text-decoration:none;}
.lightSwitcher:hover {text-decoration:underline;}
#shadow {
display:none;
position: absolute;
left: 0;
top: 0;
background: #000;
opacity: .9;
width: 100%;
z-index: 100;
}
.post-body iframe {position: relative;z-index: 102;}

JavaScript

//<![CDATA[       
$(document).ready(function(){
            $("#shadow").css("height", $(document).height()).hide();
            $(".lightSwitcher").click(function(){
                $("#shadow").toggle();
                if ($("#shadow").is(":hidden"))
                    $(this).html("Turn off the lights").removeClass("turnedOff");
                 else
                    $(this).html("Turn on the lights").addClass("turnedOff");
            });
            
        });
//]]>