Bootstrap Modals

<!-- jQuery Code (to Show Modal on Page Load) -->
<script>
$(document).ready(function() {
    $("#myModal").modal("show");
});
</script>

<!-- Modal HTML -->
<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes to this document before closing?</p>
                <p class="text-secondary"><small>If you don't save, your changes will be lost.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript Code (to Show Modal on Page Load) -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    var myModal = new bootstrap.Modal(document.getElementById("myModal"));
    myModal.show();
});
</script>

<!-- Modal HTML -->
<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes to this document before closing?</p>
                <p class="text-secondary"><small>If you don't save, your changes will be lost.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        $("#myModal").modal("show");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");

    btn.addEventListener("click", function() {
        var myModal = new bootstrap.Modal(document.getElementById("myModal"));
        myModal.show();
    });
});
</script>

<script>
$(document).ready(function() {
    $("#myModal").on("show.bs.modal", function(event) {
        // Get the button that triggered the modal
        var button = $(event.relatedTarget);

        // Extract value from the custom data-* attribute
        var titleData = button.data("title");

        // Change modal title
        $(this).find(".modal-title").text(titleData);
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var myModal = document.getElementById("myModal");

    myModal.addEventListener("show.bs.modal", function(event) {        
        // Get the button that triggered the modal
        var button = event.relatedTarget;
        
        // Extract value from the custom data-* attribute
        var titleData = button.getAttribute("data-title");

        // Change modal title
        myModal.querySelector(".modal-title").innerText = titleData;
    });
});
</script>

<!-- jQuery Code (to Load Content via Ajax) -->
<script>
$(document).ready(function() {
    $("#myModal").on("show.bs.modal", function() {
        // Place the returned HTML into the selected element
        $(this).find(".modal-body").load("remote.php");
    });
});
</script>

<!-- Button HTML (to Trigger Modal) -->
<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Launch Demo Modal</button>
    
<!-- Modal HTML -->
<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ajax Loading Demo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Content will be loaded here from "remote.php" file -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">OK, Got it!</button>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript Code (to Load Content via Ajax) -->
<script>
// Define function to fetch content from a remote file
function loadContent(url) {
    var httpRequest = new XMLHttpRequest();

    httpRequest.onreadystatechange = function() {
        // Processing the server response
        if(httpRequest.readyState === XMLHttpRequest.DONE) {
            if(httpRequest.status === 200) {
                updateModal(httpRequest.responseText);
            } else {
                alert("There was a problem with the request.");
            }
        }
    };

    httpRequest.open("GET", url, true);
    httpRequest.send();
};

// Define function to update modal based on response
function updateModal(response) {
    var myModal = document.getElementById("myModal");
	myModal.querySelector(".modal-body").innerHTML = response;

}

// Load content in modal upon activation
document.addEventListener("DOMContentLoaded", function() {
    myModal.addEventListener("show.bs.modal", function() {
        loadContent("remote.php");
    });
});
</script>

<!-- Button HTML (to Trigger Modal) -->
<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Launch Demo Modal</button>
    
<!-- Modal HTML -->
<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ajax Loading Demo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Content will be loaded here from "remote.php" file -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">OK, Got it!</button>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    $("#myModal").modal({
        backdrop: "static"
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var myModal = new bootstrap.Modal(document.getElementById("myModal"), {
        backdrop: "static"
    });
});
</script>

<script>
$(document).ready(function() {
    $("#myModal").modal({
        keyboard: false
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var myModal = new bootstrap.Modal(document.getElementById("myModal"), {
        keyboard: false
    });
});
</script>

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        $("#myModal").modal("toggle");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var myModal = new bootstrap.Modal(document.getElementById("myModal"));
    
    btn.addEventListener("click", function() {        
        myModal.toggle();
    });
});
</script>

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        $("#myModal").modal("show");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var myModal = new bootstrap.Modal(document.getElementById("myModal"));

    btn.addEventListener("click", function() {        
        myModal.show();
    });
});
</script>

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        $("#myModal").modal("hide");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var myModal = new bootstrap.Modal(document.getElementById("myModal"));
    var btn = document.getElementById("myBtn");

    btn.addEventListener("click", function() {        
        myModal.hide();
    });
});
</script>

<script>
$(document).ready(function() {
    $("#showText").click(function() {
        $("#textBlock").show();
        $("#myModal").modal("handleUpdate");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("showText");

    btn.addEventListener("click", function() {
        document.getElementById("textBlock").style.display = "block";
        var myModal = bootstrap.Modal.getInstance(document.getElementById("myModal"));
        myModal.handleUpdate();
    });
});
</script>

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        var myModal = bootstrap.Modal.getInstance($("#myModal")[0]);
        console.log(myModal);
        // {_element: div#myModal.modal.fade, _config: {…}, _dialog: div.modal-dialog, _backdrop: ke, _isShown: false, …}
        
        $("#myModal").modal("dispose");
        console.log(myModal);
        // {_element: null, _config: null, _dialog: null, _backdrop: null, _isShown: null, …}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");

    btn.addEventListener("click", function() {
        var myModal = bootstrap.Modal.getInstance(document.getElementById("myModal"));
        console.log(myModal);
        // {_element: div#myModal.modal.fade, _config: {…}, _dialog: div.modal-dialog, _backdrop: ke, _isShown: false, …}
        
        myModal.dispose();
        console.log(myModal);
        // {_element: null, _config: null, _dialog: null, _backdrop: null, _isShown: null, …}
    });
});
</script>

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        var modal = bootstrap.Modal.getInstance($("#myModal")[0]);
        console.log(modal);
        // {_element: div#myModal.modal.fade, _config: {…}, _dialog: div.modal-dialog, _backdrop: ke, _isShown: false, …}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");

    btn.addEventListener("click", function() {
        var myModal = document.getElementById("myModal");
        var modal = bootstrap.Modal.getInstance(myModal);
        console.log(modal);
        // {_element: div#myModal.modal.fade, _config: {…}, _dialog: div.modal-dialog, _backdrop: ke, _isShown: false, …}
    });
});
</script>

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        var modal = bootstrap.Modal.getOrCreateInstance($("#myModal")[0]);
        console.log(modal);
        // {_element: div#myModal.modal.fade, _config: {…}, _dialog: div.modal-dialog, _backdrop: ke, _isShown: false, …}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");

    btn.addEventListener("click", function() {
        var myModal = document.getElementById("myModal");
        var modal = bootstrap.Modal.getOrCreateInstance(myModal);
        console.log(modal);
        // {_element: div#myModal.modal.fade, _config: {…}, _dialog: div.modal-dialog, _backdrop: ke, _isShown: false, …}
    });
});
</script>

<script>
$(document).ready(function() {
    $("#myModal").on("hidden.bs.modal", function() {
        alert("Modal window has been completely closed.");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var myModal = document.getElementById("myModal");

    myModal.addEventListener("hidden.bs.modal", function() {
        alert("Modal window has been completely closed.");
    });
});
</script>

<script>
$(document).ready(function(){
    $("#myModal").on("hidePrevented.bs.modal", function(){
        alert("Modal can't be closed by clicking outside, because the backdrop option is set to static.");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var myModal = document.getElementById("myModal");

    myModal.addEventListener("hidePrevented.bs.modal", function() {
        alert("Modal can't be closed by clicking outside, because the backdrop option is set to static.");
    });
});
</script>