Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Save Code
Ctrl+Alt+A
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
<!DOCTYPE html> <html> <style> /* The overlay (background) */ .modal-overlay { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } /* Show the modal */ .modal-overlay.show { display: block; } /* The modal box */ .modal-box { background: white; width: 90%; max-width: 400px; margin: 100px auto; padding: 20px; border-radius: 10px; position: relative; } /* Close button */ .modal-close { position: absolute; right: 12px; top: 8px; font-size: 24px; border: none; background: none; cursor: pointer; } </style> <body> <h1>JavaScript Project</h1> <h2>Modal Popup</h2> <button id="openBtn">Open Modal</button> <div id="modal" class="modal-overlay"> <div class="modal-box"> <button id="closeBtn" class="modal-close">×</button> <h3>Hello!</h3> <p>This is a modal popup.</p> </div> </div> </body> </html>
