page-with-modal.html
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Test: Page with Modal Popover</title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 box-sizing: border-box; 12 } 13 body { 14 font-family: Arial, sans-serif; 15 } 16 17 main { 18 padding: 40px; 19 min-height: 800px; 20 } 21 22 h1 { 23 font-size: 36px; 24 margin-bottom: 20px; 25 } 26 p { 27 font-size: 18px; 28 line-height: 1.6; 29 } 30 31 /* Modal overlay */ 32 .modal-overlay { 33 position: fixed; 34 top: 0; 35 left: 0; 36 right: 0; 37 bottom: 0; 38 background: rgba(0, 0, 0, 0.7); 39 display: flex; 40 align-items: center; 41 justify-content: center; 42 z-index: 9999; 43 } 44 45 .modal-overlay.hidden { 46 display: none; 47 } 48 49 .modal { 50 background: white; 51 padding: 40px; 52 border-radius: 8px; 53 max-width: 500px; 54 position: relative; 55 } 56 57 .modal-close { 58 position: absolute; 59 top: 10px; 60 right: 10px; 61 background: #e74c3c; 62 color: white; 63 border: none; 64 border-radius: 4px; 65 padding: 8px 16px; 66 cursor: pointer; 67 font-size: 14px; 68 } 69 70 .modal h2 { 71 font-size: 28px; 72 margin-bottom: 16px; 73 } 74 75 .modal p { 76 font-size: 16px; 77 margin-bottom: 16px; 78 } 79 80 .modal-cta { 81 background: #3498db; 82 color: white; 83 border: none; 84 border-radius: 4px; 85 padding: 12px 24px; 86 font-size: 16px; 87 cursor: pointer; 88 } 89 </style> 90 </head> 91 <body> 92 <!-- Modal overlay (visible by default) --> 93 <div id="modalOverlay" class="modal-overlay"> 94 <div class="modal"> 95 <button class="modal-close" onclick="closeModal()">Close</button> 96 <h2>Special Offer!</h2> 97 <p>Get 20% off your first service! This modal should be closed by the popover detection.</p> 98 <button class="modal-cta">Claim Offer</button> 99 </div> 100 </div> 101 102 <main> 103 <h1>Professional Plumbing Services</h1> 104 <p>Welcome to our website. The content here should be visible after the modal is closed.</p> 105 <p>We provide high-quality plumbing services to residential and commercial clients.</p> 106 </main> 107 108 <script> 109 function closeModal() { 110 document.getElementById('modalOverlay').classList.add('hidden'); 111 } 112 113 // Close modal on ESC key 114 document.addEventListener('keydown', function (e) { 115 if (e.key === 'Escape') { 116 closeModal(); 117 } 118 }); 119 </script> 120 </body> 121 </html>