screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <h3>Javascript Input field in popup modal</h3> <button class="open-modal" onclick="openModal()">Open Modal</button> <div id="myModal" class="modal"> <div class="modal-content"> <h3>Javascript Input field in popup modal</h3> <span class="close" onclick="closeModal()">×</span> <input type="text" id="myInput" placeholder="Enter something" /> <button class="submit-btn" onclick="submitInput()">Submit</button> </div> </div> <script> function openModal() { document.getElementById("myModal").style.display = "block"; } function closeModal() { document.getElementById("myModal").style.display = "none"; } function submitInput() { var inputValue = document.getElementById("myInput").value; alert("You entered: " + inputValue); closeModal(); } </script> <style> /* Modal Styles */ .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; /* Center the modal vertically and horizontally */ padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px; position: relative; } .close { color: #aaa; font-size: 28px; font-weight: bold; position: absolute; top: 10px; right: 20px; cursor: pointer; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } /* Input field Styles */ input[type="text"] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; } .submit-btn { background-color: #4caf50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } .submit-btn:hover { background-color: #45a049; } /* Open Modal Button Styles */ .open-modal { background-color: #008cba; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } .open-modal:hover { background-color: #007da6; } </style> </body> </html>