Question

我有几个按钮可以通过单击打开模态，然后通过第二次单击同一个按钮关闭它们。当我可以点击该按钮或在模态窗口外的任何地方并且窗口将关闭时，我需要实现一种行为。此外，如果我点击另一个按钮，如果任何模态打开，它应该关闭，而新的模态应该出现。

这是我到目前为止所做的事情（我需要将这些功能分开，因为每个功能都有其他逻辑）：

<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/

Answer 1

更新了小提琴，包括：由css完成的动画，在任何地方处理点击，而不是在点击打开模态时关闭。

＆＃13;

$(".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");
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您的所有要求都已得到满足。

＆＃13;

$(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();
 });

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

jQuery单击隐藏所有模态

2 个答案: