Opening and closing a Bootstrap modal using the traditional button method and then with jQuery targeting with a button click.
Opening (showing) the modal the traditional way with data-toggle and data-target
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#theModal">Open</button>
Closing (hiding) the modal with data-dismiss
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
Or you can create buttons with a click function to show
the modal or hide
the modal.
<button type="button" class="btn btn-success" id="modalOpen">Open</button> <button type="button" class="btn btn-warning" id="modalClose">Close</button>
On document ready wait for the button clicks:
$(document).ready(function () { $("#modalOpen").click(function () { $('#theModal').modal('show'); }); $("#modalClose").click(function () { $('#theModal').modal('hide'); }); });
toggle
can also be used, this will show if hidden and hide if shown. However, using this method means you don’t always know or have control of what state the modal is in.
A method to check if a modal is active (shown) or not:
if ($("#theModal").hasClass("show")) { alert('is shown'); }
This checks if the modal has the class show
.
A drained and empty Kennington reservoir images from a drone in early July 2024. The…
Merrimu Reservoir from drone. Click images to view larger.
Using FTP and PHP to get an array of file details such as size and…
Creating and using Laravel form requests to create cleaner code, separation and reusability for your…
Improving the default Laravel login and register views in such a simple manner but making…
Laravel validation for checking if a field value exists in the database. The validation rule…