CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
pee2pee
pee2pee

Reputation: 3802

jQuery / Bootstrap: Child DIV opens up Parent Modal

So I have nested DIVs and a simple version can be shown like this:

 $('#parent').click(function() {
  $('.parent').modal('show');
});
    
$('#child').click(function() {
  $('.parent').modal('hide'); // Added to try and hide
  $('.child').modal('show');
  $('.parent').modal('hide'); // Added to try and hide
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child">
  </div>
 </div>

The thing is when I click on the child div, the parent dialog also shows up behind the child dialog.

Any way to get around this?

Upvotes: 0

Views: 1215

Answers (3)

Ramya
Ramya

Reputation: 42

Try this before showing the modal:

 $( '.modal' ).remove();
$( '.child' ).modal('show');

Remove the modal before using show. Hope this will fix your issue

Upvotes: 0

Mark Wilson
Mark Wilson

Reputation: 1354

You can deal with such cases easily by mentioning the target in an attribute like below.

$('#parent, #child').click(function() {
   var target = $(this).data('target');
   $('.'+target).modal('show');
   // write code to hide others if necessary
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent" data-target="parent">
  <div id="child" data-target="child">
  </div>
 </div>

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281864

It is happending because your child click event is bubbling up to the parent. Use e.stopPropogation() for the child div. This will prevent your click event from propogating to the parent.

$('#parent').click(function() {
  $('.parent').modal('show');
});
    
$('#child').click(function(e) {
  e.stopPropogation();
  $('.parent').modal('hide'); // Added to try and hide
  $('.child').modal('show');
  $('.parent').modal('hide'); // Added to try and hide
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child">
  </div>
 </div>

Upvotes: 2

Related Questions