CODEWITHSUNDEEP
javascriptjquerycssoverlayopacity
Jakub Zak
Jakub Zak

Reputation: 1232

Overlay closing

I have an overlay:

<div id="overlayer" class="overlayer">
<div id="board" class="board"></div>
</div>

With these css properties:

#overlayer
{
position:fixed;
display:none;
top:0;
left:0;
width:100%;
height:100%;
background: -moz-linear-gradient(
        top,
        #807980 0%,
        #3d323d);
background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#807980),
        to(#3d323d));
        opacity:0.6;
        z-index:9998;
}

#board
{
position:relative;
left:33%;
top:20%;
width:600px;
height:450px;
border-radius:15px;
background-color:white;
z-index:9999;
display:none;
}

And I'm triggering it with this script:

<script type="text/javascript">
$(document).ready(function(){
function overlayerOn(){
    $('#overlayer').fadeIn(800);
}

function overlayerOff(){
    $('#overlayer').fadeOut(800);
};

$('#fr').click(function(e){
    overlayerOn();
    var $br = $('#board');
    $br.css('display', 'block');
    });

$('#overlayer').click(function(e){
    overlayerOff();});

});
</script>

But when I'm closing the overlay I would like it to close only on clicking on overlay, but my script is closing even when I click on div in middle of overlay. Any idea? Thanks...

Upvotes: 2

Views: 2044

Answers (5)

Zeta
Zeta

Reputation: 105995

You have to stop the propagation of the event:

$('#board').click(function(e){e.stopPropagation();});

See also

Upvotes: 1

redDevil
redDevil

Reputation: 1919

see SO duplicate Q basically you should prevent event propagation on the inner div,

$("#board").click(function(e){
   e.stopPropagation(); //except on IE this works
});

Upvotes: 0

Roderick Obrist
Roderick Obrist

Reputation: 3828

Yeah dude, the trick is using the e.target property Replace the close function with this and you should be sweet:

$('#overlayer').click(function(e){
    if (e.target === $('#overlayer')[0]) {
     overlayerOff();
    }
});

This is all to do with event bubbling, have a read of this bad boy and you should understand it quick: http://www.quirksmode.org/js/events_order.html

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100205

You could try adding:


$("#board").click(function(e) {
    e.stopPropagation();
    return false;
});

Did you mean something like that.

Upvotes: 0

Manse
Manse

Reputation: 38147

This is called event propagation, you can stop this by preventing the click event from propagating up the DOM by adding e.stopPropagation(); when clicking on the board element like this :

$('#board').click(function(e){
    e.stopPropagation();
});

Upvotes: 0

Related Questions