Get started with bootstrap-modal CDN

Apache-2.0 licensed

Bootstrap Modal: Create, manage modal dialogs.

Tags:
  • bootstrap
  • modal

Stable version

Copied!

How to start using bootstrap-modal CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with bootstrap-modal CDN - cdnhub.io</title>
    <!-- Add Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Add Bootstrap Modal CSS -->
    <link rel="stylesheet" href="https://cdn.cdnhub.io/bootstrap-modal/2.2.6/css/bootstrap-modal-bs4dialog.min.css">
</head>
<body>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
        Open Modal
    </button>

    <!-- Add Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </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">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Bootstrap Modal JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

    <!-- Add Bootstrap Modal Manager JS -->
    <script src="https://cdn.cdnhub.io/bootstrap-modal/2.2.6/js/bootstrap-modalmanager.min.js"></script>
    <script src="https://cdn.cdnhub.io/bootstrap-modal/2.2.6/js/bootstrap-modal.min.js"></script>

    <script>
        // Initialize Bootstrap Modal
        $(function() {
            $('#myModal').modal({backdrop: 'static', keyboard: false});
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions