Bootstrap show.bs.modal test case – V3.4.1

Modal demo

Bootstrap Issue — supporting test case

Issue: Modal event.preventDefault() for show.bs.modal: disables modal with fade class from being displayed again in V4 & V5.

The JavaScript for Bootstrap V4 & V5 stops a modal from being displayed again, once displaying the modal has been prevented using event.preventDefault().

This JS Bin using Bootstrap V3.4.1 shows event.preventDefault() working as expected:

  • A listener is attached to the modal to listen for the show.bs.modal event.
  • A checkbox switch setting allows or prevents the modal to be displayed:
    • If the checkbox is checked (Modal Enabled), the listener does nothing and the modal is displayed.
    • If the checkbox is un-checked (Modal Disabled), the listener returns event.preventDefault() and nothing is displayed.
  • In Bootstrap V3, re-checking the checkbox (re-enabling) allows the modal to again be displayed after the modal was disabled. This is not the case for Bootstrap V4 or V5.

The action of the show button can be confirmed through the developer console. As the listener is sent an event, the listener will log the button and the switch status. For V3.4.1, the console will log an action every time the button is clicked to show the modal.

Edit in JS Bin