How to stop event bubbling in jquery.

Question

I am creating a modal with a backdrop just like twitter bootstrap. When i clicked on backdrop modal should hide which is working properly.But when i click om modal,it is automatically disappearing which should not happen. Please help.

http://jsfiddle.net/svdpmbc9/

//when button is clicked open modal
                $(".modals").click(function(){
                    //.abovepage should appear
                    $(".abovepage").show();
                    $(".pagecontent").show('slow');
                });
// When backdrop is clicked close modal
                $(".abovepage").click(function(){
                    $(this).hide();
                });

HTML

<body id="wholepage">
        <div id="maincontent">
            <div id="innercontent">
                <button class="modals" data-id="large"><a href="#">Large Modal</a></button>
                <button class="modals" data-id="small"><a href="#">Small Modal</a></button>

            </div>
        </div>
        <div class="abovepage">
            <div class="pagecontent large">
                <div class="element" data-clicked="no">
                    <div class="upper">
                        <div class="uppercontent"data="modal" >
                            Large Modal 

                        <span id="closebutton"><a href="#">x</a></span>
                        </div>
                    </div>
                    <div class="lower">
                        <div class="lowercontent">
                        ...
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>

Answer 1

This is happend because modal is child element of overlay, and you hide it's parent element ( .abovepage ) on click so it hides modal too. One solution is this:

 $(document).ready(function () { //when .modals is clicked $(".modals").click(function () { //.abovepage should appear $(".abovepage").show(); $(".pagecontent").show('slow'); }); $(".abovepage").click(function () { $(".pagecontent").hide(); $(this).hide(); }); });

 #maincontent { height:60px; } #innercontent { height:40px; margin:10px; } .modals { height:40px; background-color: #6596EE; border:solid 1px #3B7EF7; border-radius: 3px; } .modals a { text-decoration: none; font-weight: bold; font:16px arial; color: white; } .modals:hover { background: #122A55; } .abovepage { position:fixed; left:0; top:0; right:0; bottom:0; background-color: #3D3C3C; opacity: 0.6; display:none; } .pagecontent { height:100px; margin-top: 52px; margin-bottom: 30px; display:none; } .large { width:900px; margin-left: 230px; margin-right: 222px; } .small { width:250px; margin-left: 511px; border-radius: 3px; } .element { height:100px; background-color: white; box-shadow:3px 3px 8px 3px #030303; position:relative; top:0px; left:0px; border:solid 1px #1D1B1B; border-radius: 5px; } .upper { height:50px; border-bottom: solid 1px #D3C8C8; } .lower { height:50px; } .uppercontent { height:25px; padding-top: 15px; padding-left: 14px; padding-right: 9px; font-weight:bold; font:18px arial; } .lowercontent { height:25px; padding-top: 15px; padding-left: 14px; } #closebutton { float:right; } #closebutton a { text-decoration:none; color:#C4BBBB; font-weight: bold; font-size:18px; } #closebutton a:hover { color:#333232; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body id="wholepage"> <div id="maincontent"> <div id="innercontent"> <button class="modals" data-id="large"><a href="#">Large Modal</a> </button> <button class="modals" data-id="small"><a href="#">Small Modal</a> </button> </div> </div> <div class="abovepage"></div> <!-- here close div --> <div class="pagecontent large"> <div class="element" data-clicked="no"> <div class="upper"> <div class="uppercontent" data="modal">Large Modal <span id="closebutton"><a href="#">x</a></span> </div> </div> <div class="lower"> <div class="lowercontent">...</div> </div> </div> </div>

Remove modal content from overlay (. abovepage ).

Answer 2

jQuery call's your click function with an event parameter, in which you can call it's stopPropagation method to prevent it from "bubbling" up the DOM tree thing.

$(".pagecontent").click(function(event){
    event.stopPropagation();
});

How to stop event bubbling in jquery.

Question

2 answers

solution1
2 ACCPTED 2014-10-11 10:33:32

solution2
0 2014-10-11 10:26:32

How to stop event bubbling in jquery.

Question

2 answers

solution1 2 ACCPTED 2014-10-11 10:33:32

solution2 0 2014-10-11 10:26:32

solution1
2 ACCPTED 2014-10-11 10:33:32

solution2
0 2014-10-11 10:26:32