popup

<div id="myModal" class="modal">

    <div class="modal-content">

        <span class="close">×</span>

        <iframe width="100%" height="700" src="https://lab.alpineiq.com/join/c/1391/1391" frameborder="0" allow="accelerometer; encrypted-media; gyroscope;"></iframe>

    </div>

</div>

<script>

    document.addEventListener('DOMContentLoaded', function() {

        var modal = document.getElementById("myModal");

        var span = document.querySelector(".modal .close");

        var buttons = document.querySelectorAll(".btn.becomeVipBtn");

        // Debugging: log to verify modal, span, and buttons elements are found

        console.log("Modal:", modal);

        console.log("Close Button:", span);

        console.log("Trigger Buttons:", buttons);

        if (modal && span && buttons.length > 0) {

            // Show the modal when any button is clicked

            buttons.forEach(function(button) {

                button.onclick = function() {

                    modal.style.display = "flex";

                    console.log("Modal display set to flex (button clicked)");

                }

            });

            // Close the modal when the user clicks on <span> (x)

            span.onclick = function() {

                modal.style.display = "none";

                console.log("Modal display set to none (close button clicked)");

            }

            // Close the modal when the user clicks anywhere outside of the modal

            window.onclick = function(event) {

                if (event.target == modal) {

                    modal.style.display = "none";

                    console.log("Modal display set to none (clicked outside)");

                }

            }

            // Close the modal when the user presses the "Esc" key

            document.addEventListener('keydown', function(event) {

                if (event.key === "Escape") {

                    modal.style.display = "none";

                    console.log("Modal display set to none (Esc key pressed)");

                }

            });

        } else {

            console.error("One or more elements not found");

        }

    });

</script>