1

Есть кнопка поиска по которой открывается выпадающая форма с полем поиска и соответственно по клику на произвольной области закрывается. А, как сделать так, чтобы при каждом клике мыши не всплывало событие на body, но при этом окошко с формой закрывалось, если кликаешь вне области?

$('.js-open-search-panel').on('click', function() {
  $(".search-box").slideDown();
});

$('body').on('click', function(e) {
  if (!$(e.target).hasClass('js-open-search-panel')) {
    if ($(".search-box").is(":visible")) {
      $(".search-box").slideUp();
    }
  }
});
.wrapper {
  position: relative;
}

.search-box {
  min-height: 68px;
  background-color: white;
  text-align: center;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  z-index: 10;
}

#searchsubmit {
  height: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <button type="button" class="top-panel-open-search button js-open-search-panel shown-sm">Поиск</button>
  <div class="search-box">
    <form role="search" method="get" id="searchform" class="searchform" action="">
      <div>
        <label class="screen-reader-text" for="s">Найти:</label>
        <input type="text" value="" name="s" id="s">
        <input type="submit" id="searchsubmit" value="Поиск">
      </div>
    </form>
  </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex illo dignissimos, maxime architecto et ab vero hic. Quaerat facere laborum molestias cumque commodi consectetur culpa dolorum praesentium, illo ut assumenda.</p>

3 ответа 3

1

Для окошка делаете блок-обертку на всю ширину и высоту экрана. Можете воспользоваться position: fixed; top: 0; right: 0; bottom: 0; left: 0;. При открытии окошка, отображаете обертку, при клике на обертку, закрываете окошко и скрываете обертку. Для пользователя это будет незаметно.

Примерно так же работает и модалка в Bootstrap, но там видно обертку (затемнение фона за модалкой)

1

Подобные вещи уже решены в bootstrap Посмотри в его сторону, может быть, пригодится

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

1
  • Вопрос вроде не про бутстрап
    – Nilsan
    23 июл 2019 в 14:57
1

$('.js-open-search-panel').on('click', function() {
  $(".search-box").slideDown();
});

$(document).mouseup(function(e) {
  var $target = $(e.target);
  if ($target.closest(".search-box").length == 0) {
    $(".search-box").slideUp();
  }
});
.wrapper {
  position: relative;
}

.search-box {
  min-height: 68px;
  background-color: white;
  text-align: center;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  z-index: 10;
}

#searchsubmit {
  height: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <button type="button" class="top-panel-open-search button js-open-search-panel shown-sm">Поиск</button>
  <div class="search-box">
    <form role="search" method="get" id="searchform" class="searchform" action="">
      <div>
        <label class="screen-reader-text" for="s">Найти:</label>
        <input type="text" value="" name="s" id="s">
        <input type="submit" id="searchsubmit" value="Поиск">
      </div>
    </form>
  </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex illo dignissimos, maxime architecto et ab vero hic. Quaerat facere laborum molestias cumque commodi consectetur culpa dolorum praesentium, illo ut assumenda.</p>

Попробуйте так...

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.