prevent bootstrap modal from opening when a button is clicked

Question

I have a page with several bootstrap modals with:

data-toggle="modal" data-target="#modal-12345" 

The problem is, I have an entire table row that is clickable, like

<tr data-toggle="modal" data-target="#modal-12345"> 

The modal content is in another hidden table row right below, followed by the next clickable row and so on. Now, this row also contains a button that will go to another page when clicked.

I need the entire row clickable so it opens the modal, except when the button to go to the other page is clicked, then I need to stop the modal from opening.

I need something like this

<script> $('.ID').on('click', '.btn', function(e) { e.stopPropagation(); }) </script> 

But targeting this:

data-toggle="modal" 

I also tried giving the TR a class of "modaltoggle" and then calling it with the javascript as .modaltoggle but that didn't work either.

Answer 1

Add some kind of identifier for the item you don't want to trigger the modal, a class like no-modal for example, then in your jQuery add code for the modal's show.bs.modal event. Capture the relatedElement, which is the element that triggered the event, then see if it has the class you're looking for. If it does, run e.stopPropagation().

BOOTPLY

jQuery:

$('#myModal').on('show.bs.modal', function (e) {   var button = e.relatedTarget;   if($(button).hasClass('no-modal')) {     e.stopPropagation();   }   }); 

HTML:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">   Launch demo modal </button>  <button type="button" class="btn btn-primary btn-lg no-modal" data-toggle="modal" data-target="#myModal">   Launch demo modal </button>  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">   <div class="modal-dialog">     <div class="modal-content">       <div class="modal-header">         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>         <h4 class="modal-title" id="myModalLabel">Modal Header</h4>       </div>       <div class="modal-body">         ...       </div>       <div class="modal-footer">         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>         <button type="button" class="btn btn-primary">Save changes</button>       </div>     </div>   </div> </div> 

As you can see, the second button has a class called no-modal. When clicked, the jQuery checks for the existence of that class, and if it exists it prevents the modal from popping. Clicking the first button causes the modal to pop normally because it doesn't have that class.

Bootstrap modals trigger specific events when they're popped by an element on the page, from the moment they're triggered through the moment they've fully popped. You can read about these events to get an idea of what you can use them for by checking the Events section for Bootstrap modals in the official documentation.