Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BS Modal Issue – V5.0.1 Case – Comparison</title>
    <meta name="description" content="Bootstrap show.bs.modal test case – V5.0.1 – Comparison">
​
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" integrity="sha512-Ez0cGzNzHR1tYAv56860NLspgUGuQw16GiOOp/I2LuTmpSK9xDXlgJz3XN4cnpXWDmkNBKXR/VDMTCnAaEooxA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
​
    <style>
        li {
            margin-bottom: 0.375rem;
        }
        
        code {
            font-size: 1em;
        }
​
        .btn {
            width: 11rem;
        }
​
        .form-switch .form-check-input {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h2 class="text-center">Bootstrap <code>show.bs.modal</code> test case &ndash; V5.0.1 &ndash; Comparisons</h2>
        <div class="row justify-content-evenly">
            <div class="col-6 col-md-4 col-lg-3">
                <h3>Dropdown demo</h3>
                <div class="form-check form-switch mb-3">
                    <input id="dropdownSwitch" class="form-check-input" type="checkbox" checked autocomplete="off">
                    <label id="dropdownLabel" class="form-check-label font-italic" for="dropdownSwitch">Dropdown Enabled</label>
                </div>
                <!-- Button trigger dropdown -->
                <div class="dropdown">
                    <button id="dropdownButton" class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Show Dropdown
                    </button>
                    <ul id="myDropdown" class="dropdown-menu" aria-labelledby="dropdownButton">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </div>
​
                <h3 class="mt-4">Collapse demo</h3>
                <div class="form-check form-switch mb-3">
                    <input id="collapseSwitch" class="form-check-input" type="checkbox" checked autocomplete="off">
                    <label id="collapseLabel" class="form-check-label font-italic" for="collapseSwitch">Collapse Enabled</label>
                </div>
                <div>
                    <button id="collapseButton" class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                        Show Collapse
                    </button>
                </div>
                <div class="collapse" id="collapseExample">
                    <div class="card card-body">
                        Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
                    </div>
                </div>
                <h3 class="mt-4">Popover demo</h3>
                <div class="form-check form-switch mb-3">
                    <input id="popoverSwitch" class="form-check-input" type="checkbox" checked autocomplete="off">
                    <label id="popoverLabel" class="form-check-label font-italic" for="popoverSwitch">Popover Enabled</label>
                </div>
                <div>
                    <button id="myPopover" type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
                        Show Popover
                    </button>
                </div>
                <h3 class="mt-4">Offcanvas demo</h3>
                <div class="form-check form-switch mb-3">
                    <input id="offcanvasSwitch" class="form-check-input" type="checkbox" checked autocomplete="off">
                    <label id="offcanvasLabel" class="form-check-label font-italic" for="offcanvasSwitch">Offcanvas Enabled</label>
                </div>
                <div>
                    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
                        Show Offcanvas
                    </button>
                </div>
                <div id="offcanvasExample" class="offcanvas offcanvas-start" tabindex="-1" aria-labelledby="offcanvasExampleLabel">
                    <div class="offcanvas-header">
                        <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body">
                        <div>
                            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-4 col-lg-3">
                <h3>Modal demo</h3>
                <div class="form-check form-switch mb-3">
                    <input id="modalSwitch" class="form-check-input" type="checkbox" checked autocomplete="off">
                    <label id="modalLabel" class="form-check-label font-italic" for="modalSwitch">Modal Enabled</label>
                </div>
                <!-- Button trigger modal -->
                <button id="modalButton" class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#myModal">
                    Show Modal
                </button>
            </div>
        </div>
    </div>
​
    <div class="container my-5">
        <div class="row justify-content-center">
            <div class="col-sm-11 col-md-9 col-lg-7">
                <h3>Bootstrap Issue &mdash; supporting test case</h3>
                <p><a href="https://github.com/twbs/bootstrap/issues/34055" title="Put real link here!">Issue:</a> Modal event.preventDefault() for show.bs.modal: disables modal with fade class from being displayed again in V4 & V5.</p>
                    
                <p>The JavaScript for Bootstrap V4 & V5 stops a modal from being displayed again, once displaying the modal has been prevented using <code>event.preventDefault()</code>.</p>
                <p>This JS Bin using Bootstrap V5.0.1 shows <code>event.preventDefault()</code> not working as expected after a modal has been prevented from displaying.</p>
                <p>This JS Bin also includes examples of other Bootstrap components (dropdown, collapse, popover, and offcanvas) working as expected:</p>
                <ul>
                    <li>A listener is attached to listen for the <code>show.bs.<em>component</em></code> event.</li>
                    <li>The checkbox switch setting allows or prevents the component to be displayed:
                        <ul>
                            <li>If the checkbox is checked (<em>Component</em> Enabled), the listener does nothing and the component is displayed.</li>
                            <li>If the checkbox is un-checked (<em>Component</em> Disabled), the listener returns <code>event.preventDefault()</code> and nothing is displayed.</li>
                        </ul>
                    </li>
                    <li>In Bootstrap V5 (&amp; V4), re-checking the checkbox (re-enabling) should allow the modal to again be displayed after the modal was disabled, but this is not the case .</li>
                    <li>In Bootstrap V5 (&amp; V4), re-checking the checkbox (re-enabling) does allow the other components to again be displayed after the component was disabled.</li>
                </ul>
                <p>The action of the show buttons can be confirmed through the developer console. As the listeners are sent an event, the listener will log the button and the switch status. For the dropdown, collapse, popover, and offcanvas buttons, the console will log an action every time a button is clicked.</p>
                <p>For the modal button, an action will be logged every time the button is clicked, so long as the modal is enabled. Once the switch is changed to disable modals, only one more event will be logged. After that, the modal listener will not be sent any more events.</p>
            </div>
        </div>
    </div>
​
    <!-- Modal -->
    <div id="myModal" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 id="myModalLabel" class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.js" integrity="sha512-jrPfgwWrYtTfEO47P2AJWZqIpy3bLH6eyqrPWbaYvigUW1i0MxLEuM16JOm+IS6SAhFREKHfVn4cBA4NQ0Ntxg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
​
    <script>
        var dropdownCheckbox = document.getElementById('dropdownSwitch');
        var dropdownCheckboxLabel = document.getElementById('dropdownLabel');
        var dropdownPreventDefault = false;
        var myDropdown = document.getElementById('dropdownButton');
​
        dropdownCheckbox.addEventListener('change', (event) => {
            if (event.currentTarget.checked) {
                dropdownPreventDefault = false;
                dropdownCheckboxLabel.innerHTML = 'Dropdown Enabled';
            } else {
                dropdownPreventDefault = true;
                dropdownCheckboxLabel.innerHTML = 'Dropdown Disabled';
            }
        });
​
        myDropdown.addEventListener('show.bs.dropdown', (event) => {
            console.log('Dropdown: ' + dropdownPreventDefault);
            if (dropdownPreventDefault === true) {
                return event.preventDefault();
            }
        });
​
​
        var collapseCheckbox = document.getElementById('collapseSwitch');
        var collapseCheckboxLabel = document.getElementById('collapseLabel');
        var collapsePreventDefault = false;
        var myCollapse = document.getElementById('collapseExample');
​
        collapseCheckbox.addEventListener('change', (event) => {
            if (event.currentTarget.checked) {
                collapsePreventDefault = false;
                collapseCheckboxLabel.innerHTML = 'Collapse Enabled';
            } else {
                collapsePreventDefault = true;
                collapseCheckboxLabel.innerHTML = 'Collapse Disabled';
            }
        });
​
        myCollapse.addEventListener('show.bs.collapse', (event) => {
            console.log('Collapse: ' + collapsePreventDefault);
            if (collapsePreventDefault === true) {
                return event.preventDefault();
            }
        });
​
        
        var popoverButton = document.getElementById('myPopover');
        var popover = new bootstrap.Popover(popoverButton);
        var popoverCheckbox = document.getElementById('popoverSwitch');
        var popoverCheckboxLabel = document.getElementById('popoverLabel');
        var popoverPreventDefault = false;
​
        popoverCheckbox.addEventListener('change', (event) => {
            if (event.currentTarget.checked) {
                popoverPreventDefault = false;
                popoverCheckboxLabel.innerHTML = 'Popover Enabled';
            } else {
                popoverPreventDefault = true;
                popoverCheckboxLabel.innerHTML = 'Popover Disabled';
            }
        });
​
        popoverButton.addEventListener('show.bs.popover', (event) => {
            console.log('Popover: ' + popoverPreventDefault);
            if (popoverPreventDefault === true) {
                return event.preventDefault();
            }
        })
​
​
        var offcanvasCheckbox = document.getElementById('offcanvasSwitch');
        var offcanvasCheckboxLabel = document.getElementById('offcanvasLabel');
        var offcanvasPreventDefault = false;
        var myOffcanvas = document.getElementById('offcanvasExample');
​
        offcanvasCheckbox.addEventListener('change', (event) => {
            if (event.currentTarget.checked) {
                offcanvasPreventDefault = false;
                offcanvasCheckboxLabel.innerHTML = 'Offcanvas Enabled';
            } else {
                offcanvasPreventDefault = true;
                offcanvasCheckboxLabel.innerHTML = 'Offcanvas Disabled';
            }
        });
​
        myOffcanvas.addEventListener('show.bs.offcanvas', (event) => {
            console.log('Offcanvas: ' + offcanvasPreventDefault);
            if (offcanvasPreventDefault === true) {
                return event.preventDefault();
            }
        });
​
​
        var modalCheckbox = document.getElementById('modalSwitch');
        var modalCheckboxLabel = document.getElementById('modalLabel');
        var modalPreventDefault = false;
        var myModal = document.getElementById('myModal');
​
        modalCheckbox.addEventListener('change', (event) => {
            if (event.currentTarget.checked) {
                modalPreventDefault = false;
                modalCheckboxLabel.innerHTML = 'Modal Enabled';
            } else {
                modalPreventDefault = true;
                modalCheckboxLabel.innerHTML = 'Modal Disabled';
            }
        });
​
        myModal.addEventListener('show.bs.modal', (event) => {
            console.log('Modal: ' + modalPreventDefault);
            if (modalPreventDefault === true) {
                return event.preventDefault();
            }
        });
    </script>
</body>
​
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
RichDeBourkepro
0viewers