Question

Twitter Bootstrap has the ability to call modals “via data attributes”, which is nice, but I am not sure how to turn them off or replace the button’s event.

Example of setting up via attributes:

<button id="launch-btn" type="button" data-toggle="modal" data-target="#myModal">
   Launch modal
</button>

I’ve tried:

$('#launch-btn').off('click');
$('#launch-btn').unbind('click');
$('#launch-btn').on('click', function(e){e.preventDefault();});

But all seem to still open the modal. I want to prevent the default modal from opening and replace it with another action if a condition is met. I know I can use the modal’s show event to prevent displaying, but I don’t want to do that here, I want to control the behavior from the button.

I also realize it might be easier to handle the creation of the modal on-the-fly instead using JS instead of letting bootstrap handle it via the data attributes, but I’m now a curious george and am trying to discover what I’m doing wrong.

Answer 1

This works: $(document).off('click.modal.data-api', '[data-toggle="modal"]');