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 – V3.4.1 Case</title>
    <meta name="description" content="Bootstrap show.bs.modal test case – V3.4.1">
​
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha512-Dop/vW3iOtayerlYAqCgkVr2aTr2ErwwTYOvRFUpzl2VhCMJyjQF0Q9TjUXIo6JhuM/3i0vVEt2e/7QQmnHQqw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
​
    <style>
        li {
            margin-bottom: 0.375rem;
        }
​
        code {
            font-size: 1em;
            color: #d63384;
            word-wrap: break-word;
            padding: 0;
            background-color: transparent;
        }
    </style>
​
</head>
<body>
    <div class="container" style="margin-top: 2rem;">
        <h2 class="text-center">Bootstrap <code>show.bs.modal</code> test case &ndash; V3.4.1</h2>
        <div class="row">
            <div class="col-xs-12 text-center">
                <h3>Modal demo</h3>
                <p>
                    <input id="modalSwitch" type="checkbox" checked autocomplete="off">
                    <label id="modalLabel" for="modalSwitch">Modal Enabled</label>
                </p>
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                    Show modal
                </button>
            </div>
        </div>
    </div>
    <div class="container" style="margin-top: 5rem; margin-bottom: 10rem;">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <h3>Bootstrap Issue &mdash; supporting test case</h3>
                <p><a href="https://github.com/twbs/bootstrap/issues/34055">Issue:</a> Modal <code>event.preventDefault()</code> for <code>show.bs.modal</code>: disables modal with <code></code>fade</code> class from being displayed again in V4 & V5.</p>
                <p>The JavaScript for Bootstrap V4 &amp; 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 V3.4.1 shows <code>event.preventDefault()</code> working as expected:</p>
                <ul>
                    <li>A listener is attached to the modal to listen for the <code>show.bs.modal</code> event.</li>
                    <li>A checkbox switch setting allows or prevents the modal to be displayed:
                        <ul>
                            <li>If the checkbox is checked (Modal Enabled), the listener does nothing and the modal is displayed.</li>
                            <li>If the checkbox is un-checked (Modal Disabled), the listener returns <code>event.preventDefault()</code> and nothing is displayed.</li>
                        </ul>
                    </li>
                    <li>In Bootstrap V3, re-checking the checkbox (re-enabling) allows the modal to again be displayed after the modal was disabled. <em>This is not the case for Bootstrap V4 or V5</em>.</li>
                </ul>
                <p>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.</p>
            </div>
        </div>
    </div>
​
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" integrity="sha512-jGsMH83oKe9asCpkOVkBnUrDDTp8wl+adkB2D+//JtlxO4SrLoJdhbOysIFQJloQFD+C4Fl1rMsQZF76JjV0eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.js" integrity="sha512-NP/69p3iBF6LkK2vcsbD1zuZu1gYMu594b5400dTo7qX06obhSfsF0fSXidZTk4KSpEE4eft6BGrdIqht2aELA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
​
    <script>
        var modalCheckbox = document.getElementById('modalSwitch');
        var modalCheckboxLabel = document.getElementById('modalLabel');
        var modalPreventDefault = false;
​
        modalCheckbox.addEventListener('change', (event) => {
            if (event.currentTarget.checked) {
                modalPreventDefault = false;
                modalCheckboxLabel.innerHTML = "Modal Enabled";
            } else {
                modalPreventDefault = true;
                modalCheckboxLabel.innerHTML = "Modal Disabled";
            }
        });
​
        $('#myModal').on('show.bs.modal', function(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