CODEWITHSUNDEEP
javascriptjqueryevent-handlingmodal-dialogclick
be well
be well

Reputation: 335

jQuery click hide all modal

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/

Upvotes: 0

Views: 1301

Answers (2)

Joschi
Joschi

Reputation: 2974

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>

Upvotes: 3

Rajkumar Somasundaram
Rajkumar Somasundaram

Reputation: 1270

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>

Upvotes: 1

Related Questions