jQuery click hide all modal

Question

I have a few buttons that open modals by click and close them by the second click on the very same button. I need to achieve a behaviour when I can click on that button OR anywhere outside of the modal window and that windows will close. Also, if I click another button, if any modal is open, it should close and new modal should appear instead.

This is what I have so far (I need to keep those functions separated due to there will be additional logic for each of them):

<div class="container">
  <div class="box red"></div>
  <div class="box green"></div>
  <div class="box blue"></div>
  <div class="modal red"></div>
  <div class="modal green"></div>
  <div class="modal blue"></div>
</div>

<script>
// red
function redBoxShow() {
    $('.modal.red').animate({opacity: 1, top: '40'}, 400);
    $(this).one("click", redBoxHide);
}
function redBoxHide() {
    $('.modal.red').animate({opacity: 0, top: '-200px'}, 400);
    $(this).one("click", redBoxShow);
}
// green
function greenBoxShow() {
  $('.modal.green').animate({opacity: 1, top: '40'}, 400);
  $(this).one("click", greenBoxHide);
}
function greenBoxHide() {
  $('.modal.green').animate({opacity: 0, top: '-200px'}, 400);
  $(this).one("click", greenBoxShow);
}
// blue
function blueBoxShow() {
  $('.modal.blue').animate({opacity: 1, top: '40'}, 400);
  $(this).one("click", blueBoxHide);
}
function blueBoxHide() {
  $('.modal.blue').animate({opacity: 0, top: '-200px'}, 400);
  $(this).one("click", blueBoxShow);
}
$(".box.red").one("click", redBoxShow);
$(".box.green").one("click", greenBoxShow);
$(".box.blue").one("click", blueBoxShow);
</script>

https://jsfiddle.net/8wfgbpau/9/

How do I detect a click outside an element: https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element?rq=1 — Mr. Hugo, Nov 16 '17 at 10:49
These are not popups. First of all, create popup along with the parent as an overlay. Then on click event of the overlay check if it's a not the popup body then trigger the close event. — abhijeetwebdev, Nov 16 '17 at 10:54

score 3 · Accepted Answer · answered Nov 16 '17 at 11:06

Updated fiddle including: animation done by css, handling clicks anywhere and not closing when open modal clicked.

$(".box").on("click", function(e){
  var $this = $(this);
  var $modals = $(".container .modal");
  var $modal;
  if ($this.hasClass("red")) {
   $modal = $modals.filter(".red");
  } else if ($this.hasClass("green")) {
   $modal = $modals.filter(".green");
  }else if ($this.hasClass("blue")) {
   $modal = $modals.filter(".blue");
  } else {
   return;
  }
  
  if (!$modal.hasClass("open")) {
   $modals.removeClass("open");
   $modal.addClass("open");
    e.stopPropagation();
 }
});

$(document).on("click", ".container .modal.open", function(e){
  e.stopPropagation();
});

$(window).on("click", function(e){
  $(".container .modal.open").removeClass("open");
});

.container {
  width: 300px;
  text-align: center;
  position: relative;
}
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
.modal {
  position: absolute;
  opacity: 0;
  top: -200px;
  transition: opacity linear 400ms, top linear 400ms;

}
.box {
  width: 30px;
  height: 30px;
  display: inline-block;
  margin-left: 10px;
}
.box:hover {
  cursor:pointer;
  opacity:0.8;
}
.modal {
  width: 150px;
  height: 150px;
}
.modal.red {
  left: 0;
}
.modal.green {
  left: calc(50% - 75px);
}
.modal.blue {
  right: 0;
}

.modal.open {
  opacity: 1;
  top: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="box red"></div>
  <div class="box green"></div>
  <div class="box blue"></div>
  <div class="modal red"></div>
  <div class="modal green"></div>
  <div class="modal blue"></div>
</div>

Thank you as well. This does exactly what I need. – be well Nov 16 '17 at 11:09 — be well, Nov 16 '17 at 11:09

score 1 · Answer 2 · answered Nov 16 '17 at 11:01

All your requirements have been met.

$(window).click(function() {
hideAllActiveBoxes();
});

// red
function hideAllActiveBoxes() {
    $('.modal').each(function(e){
       if($('.modal').css('opacity',1)) $('.modal').css('opacity',0)
    })
}

function redBoxShow() {
  $('.modal.red').animate({opacity: 1, top: '40'}, 400);  
}
function redBoxHide() {
  $('.modal.red').animate({opacity: 0, top: '-200px'}, 400);  
}
// green
function greenBoxShow() {
  $('.modal.green').animate({opacity: 1, top: '40'}, 400);  
}
function greenBoxHide() {
  $('.modal.green').animate({opacity: 0, top: '-200px'}, 400);  
}
// blue
function blueBoxShow() {
  $('.modal.blue').animate({opacity: 1, top: '40'}, 400);  
}
function blueBoxHide() {
  $('.modal.blue').animate({opacity: 0, top: '-200px'}, 400);  
}
$(".box.red").on("click", function(){
   hideAllActiveBoxes();
   redBoxShow();
 });
 
 $(".box.green").on("click", function(){
   hideAllActiveBoxes();
   greenBoxShow();
 });
 
 $(".box.blue").on("click", function(){
   hideAllActiveBoxes();
   blueBoxShow();
 });

.container {
  width: 300px;
  text-align: center;
  position: relative;
}
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
.modal {
  position: absolute;
  opacity: 0;
  top: -200px;
}
.box {
  width: 30px;
  height: 30px;
  display: inline-block;
  margin-left: 10px;
}
.box:hover {
  cursor:pointer;
  opacity:0.8;
}
.modal {
  width: 150px;
  height: 150px;
}
.modal.red {
  left: 0;
}
.modal.green {
  left: calc(50% - 75px);
}
.modal.blue {
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
  <div class="box red"></div>
  <div class="box green"></div>
  <div class="box blue"></div>
  <div class="modal red"></div>
  <div class="modal green"></div>
  <div class="modal blue"></div>
</div>

Thank you, I will give it a try. – be well Nov 16 '17 at 11:04 — be well, Nov 16 '17 at 11:04

jQuery click hide all modal

2 Answers2