Rак сделать модальное окно при нажатии на поисковую строку?
Такой вопрос ! Хочу сделать что бы при нажатии на поисковое меню ну тоесть на сому строку поиска вылетало мадальное окно незакрывающие саму поисковую строку! а под поиском Использую bootstrap , неполучается...
сам код
<section> <div id="sticky-wrapper" class="sticky-wrapper"> <div class="surch__main" bis_skin_checked="1"> <div class=" col-xl-100 col-lg-12 col-md-12 d-block mx-auto" bis_skin_checked="1"> <div class=" search-background bg-transparent" bis_skin_checked="1"> <div id="classified-search" data-pjax-container="" data-pjax-timeout="1000" bis_skin_checked="1"> <form id="w0" action="/classified/index" method="post" data-pjax="1"> <input type="hidden" name="_csrf-frontend" value="a-Aeh4pbGMpoSkFVmrtzKi3h_bTUQIxkZ76Hsd7f9PYTt0e-uj9fpwUPdyLp5AYZWtjOhJEu6SwKzNbnlJmYxw=="> <div class="= form row no-gutters d-flex justify-content-center" bis_skin_checked="1"> <div class="test911 form-group col-xl-5 col-lg-8 col-md-15 mb-0 bg-white field-text4 required" bis_skin_checked="1"> <input type="text" id="text4" class=" form-control input-lg br-tr-md-0 br-br-md-0" name="ClassifiedSearch[keyword]" placeholder="insert word to search" aria-required="true"> <div class="invalid-feedback" bis_skin_checked="1"></div> </div> <div class="col-xl-3 col-lg-3 col-md-12 mb-0" bis_skin_checked="1"> <button type="submit" class="btn__style-hover color-3 btn-lg btn-block br-tl-md-0 br-bl-md-0">Search</button> </div> </div> </form> </div> </div> </div> </div> </div> </section> |
<section> <div id="sticky-wrapper" class="sticky-wrapper"> <div class="surch__main" bis_skin_checked="1"> <div class=" col-xl-100 col-lg-12 col-md-12 d-block mx-auto" bis_skin_checked="1"> <div class=" search-background bg-transparent" bis_skin_checked="1"> <div id="classified-search" data-pjax-container="" data-pjax-timeout="1000" bis_skin_checked="1"> <form id="w0" action="/classified/index" method="post" data-pjax="1"> <input type="hidden" name="_csrf-frontend" value="a-Aeh4pbGMpoSkFVmrtzKi3h_bTUQIxkZ76Hsd7f9PYTt0e-uj9fpwUPdyLp5AYZWtjOhJEu6SwKzNbnlJmYxw=="> <div class="= form row no-gutters d-flex justify-content-center" bis_skin_checked="1"> <div class="test911 form-group col-xl-5 col-lg-8 col-md-15 mb-0 bg-white field-text4 required" bis_skin_checked="1"> <input type="text" id="text4" class=" form-control input-lg br-tr-md-0 br-br-md-0" name="ClassifiedSearch[keyword]" placeholder="insert word to search" aria-required="true"> <div class="invalid-feedback" bis_skin_checked="1"></div> </div> <div class="col-xl-3 col-lg-3 col-md-12 mb-0" bis_skin_checked="1"> <button type="submit" class="btn__style-hover color-3 btn-lg btn-block br-tl-md-0 br-bl-md-0">Search</button> </div> </div> </form> </div> </div> </div> </div> </div> </section>
Дополнительно:
Ответы:
Причем здесь модальное окно? Вам нужна выпадающая по клику поисковая строка (обычный скрытый div с формой поиска, который становится не скрытым при клике на иконку). По факту это к bootstrap не относится, обычный JS и CSS.
Загуглите как добавить/убрать класс при клике. Вот описана верстка шапки на бутстрап, как раз с выпадающей формой поиска.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания модального окна при нажатии на поисковую строку можно использовать JavaScript и CSS. Ниже приведен пример реализации данного функционала с использованием jQuery для упрощения кода.
Сначала необходимо добавить HTML разметку для модального окна:
<div id="modal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>Модальное окно</p> </div> </div><div id="modal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>Модальное окно</p> </div> </div>
Затем добавим стили 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; }
Теперь добавим JavaScript код для отображения модального окна при нажатии на поисковую строку:
$(document).ready(function() { $(".search-bar").click(function() { $("#modal").show(); }); $(".close").click(function() { $("#modal").hide(); }); });
В данном примере предполагается, что у вас есть элемент с классом "search-bar", на который пользователь будет кликать для открытия модального окна. При клике на этот элемент вызывается функция, которая показывает модальное окно. Также предусмотрена возможность закрытия модального окна при нажатии на крестик.
Таким образом, вы можете легко создать модальное окно при нажатии на поисковую строку с помощью данного кода.