Для создания модального окна при нажатии на поисковую строку в HTML, вам понадобится использовать HTML, CSS и JavaScript.
1. Создайте HTML код для поисковой строки и модального окна. Например:
<input type="text" id="searchBox" onclick="showModal()" placeholder="Поиск..."> <div id="modal" class="modal"> <div class="modal-content"> <span class="close" onclick="hideModal()">×</span> <h2>Модальное окно</h2> <p>Содержимое модального окна</p> </div> </div>
2. Добавьте стили для модального окна в CSS. Например:
.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; padding: 20px; border: 1px solid #888; width: 80%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }
3. Добавьте скрипт JavaScript для отображения и скрытия модального окна. Например:
function showModal() { var modal = document.getElementById("modal"); modal.style.display = "block"; } function hideModal() { var modal = document.getElementById("modal"); modal.style.display = "none"; }
4. Добавьте ссылку на файл стилей CSS и скрипт JavaScript в теге head вашего HTML документа:
<head> <link rel="stylesheet" type="text/css" href="styles.css"> <script src="script.js"></script> </head>
Теперь, когда пользователь нажмет на поисковую строку, модальное окно появится, и при нажатии на символ "x" или щелчке вне модального окна, оно будет скрыто.
Помимо этого базового функционала, вы также можете доработать модальное окно, добавив дополнительные элементы и функции в JavaScript, чтобы адаптировать его для вашего проекта.