javascript/Jquery pop up - only open one pop at a time

Question

I have 3 separate scripts for 3 pop ups, Im sure there is a better way to structure these into one script? I also want to be able to only open one pop up at a time, so if .popup-new is active and i click to open .popup-new-b then .popup-new will automatically close. Any help would be much appreciated.

<script>
$(document).ready(function () {
$(".popup-trigger").click(function () {
$(".popup-new").fadeIn(300);

});

$(".popup-new > span, .popup-new").click(function () {
$(".popup-new").fadeOut(300);
});
});
</script>

<script>
$(document).ready(function () {
$(".popup-trigger-b").click(function () {
$(".popup-new-b").fadeIn(300);

});

$(".popup-new-b > span, .popup-new-b").click(function () {
$(".popup-new-b").fadeOut(300);
});
});
</script>

<script>
$(document).ready(function () {
$(".popup-trigger-c").click(function () {
$(".popup-new-c").fadeIn(300);

});

$(".popup-new-c > span, .popup-new-c").click(function () {
$(".popup-new-c").fadeOut(300);
});
});
</script>

Answer 1

You could do something like this:

popups = ['.popup-new','.popup-new-b','.popup-new,-c']

// Pass an additional parameter to popup_click, which is the index of the popup in the array
$('.popup-trigger').click({popup: 0}, popup_click);
$('.popup-trigger-b').click({popup: 1}, popup_click);
$('.popup-trigger-c').click({popup: 2}, popup_click);

function popup_click(event) {
    // Here write the code to open the popup
    // You can access the popup through $(popups[event.data.popup])
    for (var i in popups) {
        if (i != event.data.popup) { // event.data.popup contains the index that we passed
            // Here write the code to close each of the other popups
            // Access them through $(popups [i])
        }
    }
}

$('html').click(function() {
    for (var i in popups) {
        $(popups[i]).hide();
    }
});

$('.popup-btn-close').click(function(e) {
    for (var i in popups) {
        $(popups[i]).hide();
    }
});

$('.popup-new').click(stop_propagation);
$('.popup-new-b').click(stop_propagation);
$('.popup-new-c').click(stop_propagation);

function stop_propagation(e) {
    e.stopPropagation();
}

It is generally a good idea to use arrays or objects whenever you have repetitive code you want to factor.

Note that passing parameters to an event handler this way only works with jQuery; in raw JavaScript you will have to use closures.

You can even simplify both blocks of three lines by using another array and loop (see below).

Also note that as @404UserNotFound wrote, if all of your popups share a common class, you can simplify these lines:

for (var i in popups) {
    $(popups[i]).hide();
}

And turn them into:

$('.yourClassNameHere').hide(); // Will select all the elements of the right class

Which leaves you with this compact code:

popups = ['.popup-new', '.popup-new-b', '.popup-new,-c']
popup_triggers = ['.popup-trigger', '.popup-trigger-b', '.popup-trigger-c']

// Pass an additional parameter to popup_click, which is the index of the popup in the array
for (i in popup_triggers) {
    $(popup_triggers[i]).click({popup: i}, popup_click);
}

function popup_click(event) {
    // Here write the code to open the popup
    // You can access the popup through $(popups[event.data.popup])
    for (var i in suffixes) {
        if (i != event.data.popup) { // event.data.popup contains the index that we passed
            // Here write the code to close each of the other popups
            // Access them through $(popups [i])
        }
    }
}

$('html').click(function() {
    $('.yourClassNameHere').hide();
});

$('.popup-btn-close').click(function(e) {
    $('.yourClassNameHere').hide();
});

for (i in popups) {
    $(popups[i]).click(stop_propagation);
}

function stop_propagation(e) {
    e.stopPropagation();
}

And finally, if all of your popups and triggers are always named the same way, with a suffix, you could condense it even further (with a few more tricks to save some space):

suffixes = ['', '-b', '-c']

for (let i in suffixes) {
  $('.popup-trigger' + suffixes[i]).click(function(i) {
    return function(e) {
      hideAllPopups();
      $('.popup-new' + suffixes[i]).toggle();
      //e.stopPropagation(); // HERE
    }
  }(i));
}

$('.popup-btn-close').click(hideAllPopups);
//$('html').click(hideAllPopups); // HERE

function hideAllPopups() {
  $('.popup').hide();
}

// Uncomment the two lines marked "HERE" to make the popups disappear whenever you click somewhere in the page (except on the buttons)

.popup {
  margin: 20px auto;
  padding: 20px;
  background: #ccc;
  width: 30%;
  position: relative;
}

.popup-btn-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-weight: bold;
}

.box {
  background: rgba(0,0,0,0.2);
  padding: 5px;
  background-clip: padding-box;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="box popup-trigger">Trigger popup #1</span>
<span class="box popup-trigger-b">Trigger popup #2</span>
<span class="box popup-trigger-c">Trigger popup #3</span>

<hr/>

<div class="popup-new popup" style="display:none">Popup #1 <span class="popup-btn-close">X</span></div>
<div class="popup-new-b popup" style="display:none">Popup #2 <span class="popup-btn-close">X</span></div>
<div class="popup-new-c popup" style="display:none">Popup #3 <span class="popup-btn-close">X</span></div>

Answer 2

Since I cannot see your HTML. I have added some with CSS. I hope this is what you are looking for. Ofcourse I could've asked clarify but I do not have enough reputation to add comment :(

$('button').click(function(){
    $('.popup').removeClass('popped');
    $('#popup-new'+$(this).attr('class')).addClass('popped');
 });

.popup{
   position:fixed;
   width:70%;
   height:70%;
   top:50%;
   left:50%;
   margin-top:-5%;
   margin-left:-35%;
   background-color:#ccc;
   z-index:100;
   display:none;
}
.popped{
   display:block;
}

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


<div id="popup-new" class="popup">HI I am POPUP NEW</div>
<div id="popup-new-b" class="popup">HI I am POPUP-NEW-B</div>
<div id="popup-new-c" class="popup">HI I am POPUP-NEW-C</div>

<button class="">Pop up New</button>
<button class="-b">Pop up New B</button>
<button class="-c">Pop up New C</button>