Call a converted HTML to JS variable in HTML

Samuel Omolabi 0
Viewed 30

So I converted an HTML page to javascript. The javascript is an HTML popup that I will like to activate once I click the button I want the popup to open on the same page as the button page meaning it will overlay the button... I am really out of my dept...I have been all over the net trying to figure this out...i really don't know what am doing...pls help.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://hairdrstl.com/Wall/file.js"></script>
</head>
<body>
<div id="maincontent">
    <button id="button">Show Popup</button>
</div>
</body>
</html>
jquery php javascript html
1 Answers

You can achieve this by using the <dialog> HTML tag, rather than putting your modal code in a .js file.

<!DOCTYPE html>
<html>
    <head>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                document.querySelector('#button').addEventListener('click', () => {
                    document.querySelector('#modal').showModal();
                });
                document.querySelector('#button-close-modal').addEventListener('click', () => {
                    document.querySelector('#modal').close();
                });
            }, { once: true });
        </script>
    </head>
    <body>
        <div id="maincontent">
            <button id="button">Show Popup</button>
        </div>
        <dialog id="modal">
            <!-- Modal content here -->
            <h2>Modal Title</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis vitae ducimus non sed quam repudiandae dicta officia.</p>
            <button id="button-close-modal">Close</button>
        </dialog>
    </body>
</html>
userKaZ310
Related