Get started with basicModal CDN

MIT licensed

BasicModal is a lightweight React component for creating simple modal windows.

Tags:
  • modal
  • js
  • window
  • popup

Stable version

Copied!

How to start using basicModal CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with basicModal CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/basicLightbox/3.3.7/basicLightbox.min.css">
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://cdn.cdnhub.io/basicModal/3.3.9/basicModal.min.js"></script>
    <style>
        .my-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            background-color: #f8f9fa;
            padding: 30px;
            border: 1px solid #dee2e6;
            width: 300px;
            text-align: center;
        }
    </style>
</head>
<body>
    <button id="openModalBtn">Open Modal</button>

    <div id="myModal" class="my-modal">
        <p>Some text in the modal..</p>
    </div>

    <script>
        document.getElementById('openModalBtn').addEventListener('click', function() {
            basicModal(document.getElementById('myModal'), {
                title: 'My Modal',
                buttons: [{
                    text: 'Close',
                    onClick: function(instance) {
                        instance.close();
                    }
                }]
            });
        });
    </script>
</body>
</html>
Copied!
Copied!

All versions