Скрыть всплывающее окно при нажатии за его пределами

Question

Этот фрагмент кода показывает всплывающее окно. Я хочу, чтобы это всплывающее окно исчезло, когда мы щелкаем в любом месте экрана, за исключением области всплывающих окон. Я перепробовал много вещей, но результаты оказались не такими, как ожидалось. Может ли кто-нибудь помочь мне с этим? Могу ли я использовать функцию через jQuery таким образом, чтобы я мог вызвать домашнюю страницу, т.е. "a href =" # "?

#container2 {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  visibility: hidden;
  display: none;
  background-color: rgba(22, 22, 22, 0.5);
  /* complimenting your modal colors */
}

#container2:target {
  visibility: visible;
  display: block;
}

.reveal-modal {
  position: absolute;
  height: 350px;
  background: #0baa16;
  width: 450px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div id="container">
  <div id="exampleModal" class="reveal-modal">
    ........
    <a href="#">Close Modal</a>
  </div>
</div>

Answer 1

Вы можете добавить прослушиватель событий для всего документа, который скрывает ваш контейнер. Поскольку контейнер является частью вашего документа, вам необходимо остановить щелчок по этому контейнеру, чтобы всплыть и вызвать событие в вашем документе.

$(document).on('click', function(){
	$('#exampleModal').hide();
});

$('#exampleModal').on('click', function(e){
	e.stopPropagation();
});

.reveal-modal {
    position: absolute;
    height:350px;
background:#0baa16;
    width:450px;
    left:50%;
    top: 50%;
    transform:translate(-50%,-50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="exampleModal" class="reveal-modal">
    
</div>

Answer 2

Я изменил ваш код и создал пример, который вы можете закрыть в своем «всплывающем окне».

Основная идея c закрыть де-модал - проверить, наведена ли ваша мышь на элемент или нет.

$(document).ready(function(){
  $('body').click(function(){
    if(!$('#exampleModal').is(':hover'))
      $('#exampleModal').hide();
  });
});

#container {
  background:red;
  width:100%;
  height:2000px;
}

.reveal-modal {
  position: fixed;
  height: 350px;
  background: #0baa16;
  width: 450px;
  left: 50%;
  top: 10%;
  transform: translate(-50%, -50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="exampleModal" class="reveal-modal">
  </div>
</div>

Answer 3

вы можете зарегистрировать событие клика для этого, используя jQuery, проверьте код ниже:

$(document).click(function(e){
    el = e.target;
    if ($(el).attr("id") != "exampleModal" && !$(el).parents('#exampleModal').length){
        $('#exampleModal').hide();
    }
});

#container2 {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  visibility: hidden;
  display: none;
  background-color: rgba(22, 22, 22, 0.5);
  /* complimenting your modal colors */
}

#container2:target {
  visibility: visible;
  display: block;
}

.reveal-modal {
  position: absolute;
  height: 350px;
  background: #0baa16;
  width: 450px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="container">
  <div id="exampleModal" class="reveal-modal">
    ........
    <a href="#">Close Modal</a>
  </div>
</div>

может быть, это поможет вам.