CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mitch Barlow
Mitch Barlow

Reputation: 131

closing a jquery popup when a element is already active

I got quite a bit of help from another great user on this site already, am curious if someone could help with one more question on this code. this is essentially where I am at. one hovers the gray boxes to highlight an element on the screen. when one gray element is clicked a blue box appears, and the highlighted element stays as well. if the new blue element is clicked, the red box goes away and the blue box go away, and the hovers function accordingly after. if one element is active, and I want to click the other gray element, currently, another new element pops in, giving me two blue boxes. I only want the corresponding blue box active at a time. so if element 1 blue box is active, I want to click element 2, and deactivate blue box 1, while activating blue box 2.

here is I am currently at

html

<div class="bg">1</div>
<div class="bg2">1</div>
<div class="bgpopup">1</div>

<div class="bg">2</div>
<div class="bg2">2</div>
<div class="bgpopup">2</div>

css

.bg {
  background: #ccc;
  width: 200px;
  height: 120px;
}
.bg:hover {
  background: #000;
}
.bg2 {
  position:absolute; top:250px;
  left:250px;
  background: red;
  width: 200px;
  height: 120px;
  display:none;
}
.bgpopup {
  background: blue;
  width: 200px;
  height: 120px;
  display:none;
}

script

$(".bg").each(function(){
  var $bg  = $(this);
  var $bg2 = $bg.nextAll('.bg2:first');
  var $bgP = $bg.nextAll('.bgpopup:first');
  $bg.data("activated", 0).hover(function(){
    if($bg.data("activated") === 0) $bg2.toggle();
  }).click(function(){
    $bg.data("activated", 1);
    $bgP.show().on("click", function(){
      $bg.data("activated", 0);
      $bg2.add( this ).hide();
    });
  });
});

with link http://jsfiddle.net/skinnyb/0vvk945y/8/

Upvotes: 1

Views: 101

Answers (2)

omikes
omikes

Reputation: 8513

Try hiding both blue's before one appears to ensure there is only one at a time:

jsfiddle.net/2sxy9mzw/

All I did was added one line before $bg.data("activated", 1);

which was:

$('.bgpopup').hide();

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206131

In that case and knowing that the HTML will not be changed in the future (cause the order is important!) I'd do it almost all using CSS's + next-sibling selector.

Regarding jQuery i'd keep it at the minimum and use it exclusively to toggle CSS classes:

var $bg = $(".bg"); // Cache all buttons

$(".bg").on("click", function(){
  $bg.removeClass("active");
  $(this).addClass("active");
});

$(".blue").on("click", function(){
  $bg.removeClass("active");
});
.bg {
  background: #ccc;
  margin-top: 10px;
  width: 200px;
  height: 120px;
  transition:0.3s;
}
.bg:hover {
  background: #000;
}

.red {
  position: absolute;
  top: 250px;
  left: 250px;
  background: red;
  width: 200px;
  height: 120px;
  visibility:hidden;
  transition: 0.3s;
  cursor:pointer;
  opacity: 0;
}
.bg:hover  + .red{
  visibility: visible;
  z-index:2; /* prioritize (overlay) hovered - over active ones*/
  opacity: 1;
}
.bg.active + .red{
  visibility: visible;
  z-index:1; /* keep below hovered ones */
  opacity: 1;
}
.bg.active + .red + .blue{
  display: block;
}

.blue {
  background: blue;
  width: 200px;
  height: 120px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="bg">1</div>
<div class="red">1</div>
<div class="blue">1</div>

<div class="bg">2</div>
<div class="red">2</div>
<div class="blue">2</div>

PS: I've used other classNames to prevent headaches. Usually a popup shows at the screen center, not below some other element like you did... Feel free to edit my classes as you need.

Upvotes: 1

Related Questions