Multiple responsive pop-ups in same page - popup

Question

i'm trying to add two responsive popups in my page but since i'm new in javascript i cant figure out how to modify this code to make it work for both. So far only one works.
html
<div class="container">
<h1>Responsive Popup</h1>
<a id= "popup-trigger1" class="popup-trigger">Open PopUp 1</a>
<a id= "popup-trigger2" class="popup-trigger">Open PopUp 2</a>
</div>
<div class="popup">
<div class="popup-text">This is my popup 1</div>
<span class="popup-btn-close">×</span>
</div>
css
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
.popup-trigger { display: block; margin: 0 auto; padding: 20px; max-width: 260px; background: #4EBD79; color: #fff; font-size: 18px; font-weight: 700; text-align:center; text-transform: uppercase; line-height: 24px; cursor: pointer; }
body {
background-color: #E3E3E3;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
text-align: center;
.container {
max-width: 400px;
margin: 0 auto;
padding: 30px;
text-align: center;
background: white;
border-radius: 10px;
border: 5px solid #9AD3DE;
box-sizing: border-box;
}
}
p {
color: #666666;
margin: 30px auto;
text-align: center;
font-size: 16px;
}
.popup {
background: rgba(100, 100, 100, 0.6);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
> div {
border-radius: 10px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 15px 0px rgba(#000000, 0.3);
padding: 30px 15px;
/* Width of popup can be changed */
width: 70%;
max-width: 600px;
z-index: 5001;
#include transform(translate(-50%, -50%));
left: 50%;
top: 50%;
text-align: center;
border: 5px solid #9AD3DE;
}
}
.popup {
background: rgba(100, 100, 100, 0.6);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup > div {
border-radius: 10px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
padding: 30px 15px;
/* Width of popup can be changed */
width: 70%;
max-width: 600px;
z-index: 5001;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: left;
border: 5px solid #f28920;
}
.popup-btn-close {
position: absolute;
background-color: #f28920;
color:white;
top: -15px;
right: -15px;
border-radius: 50%;
width: 30px;
height: 30px;
line-height:30px;
text-align:center;
font-size:20px;
font-weight:bold;
font-family:'Arial Black', Arial, sans-serif;
cursor:pointer;
-webkit-box-shadow: -4px -2px 6px 0px rgba(0,0,0,0.1);
-moz-box-shadow: -4px -2px 6px 0px rgba(0,0,0,0.1);
box-shadow: -3px 1px 6px 0px rgba(0,0,0,0.1);
}
.popup-btn-close:hover {
background-color: #ac5918;
color: #fff;
}
.popup-text {background: #fff; color: #333; font-size: 19px; line-height: 30px; z-index: 9999;}
# Javascript#
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close
buttons */
$(popup).find(".popup-btn-close").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("#popup-trigger1").on("click", function() {
popupOpenClose($(".popup"));
});
});
This is my codepen Codepen
Your help willlll be so much appreciated.
Thank you very much!
krystel

Answer 1

Here is one way to have separate popups. I added another popup div, gave them unique ids, then created a data-target attribute on the triggers. I changed the trigger to work on everything that has a popup-trigger class, and then made a tweak to the wrapper code so that it will create a wrapper in the current popup rather than checking if ANY wrapper exists.
There is also a memory leak because every time you open a popup, you attach more event handlers instead of only attaching them once. I would highly recommend you rework them to avoid issues down the road. Convert them to global events on the document rather than per-popup. I did not change them below as I wanted a minimal change set so you could see what was necessary for your question.
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper", popup).length == 0) {
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if (e.target == this) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find(".popup-btn-close").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function() {
$(".popup-trigger").on("click", function() {
var target = $(this).data('target');
popupOpenClose($(target));
});
});
/* this was actually some kind of LESS or SASS/SCSS originally.
I just stripped out the unnecessary parts, but no changes were necessary */
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
.popup-trigger {
display: block;
margin: 0 auto;
padding: 20px;
max-width: 260px;
background: #4EBD79;
color: #fff;
font-size: 18px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
line-height: 24px;
cursor: pointer;
}
body {
background-color: #E3E3E3;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
text-align: center;
}
h1,
p,
h2,
button {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 100;
letter-spacing: 0.5px;
}
h1 {
font-size: 40px;
text-align: center;
color: #666666;
margin: 0 0 30px 0;
}
p {
color: #666666;
margin: 30px auto;
text-align: center;
font-size: 16px;
}
.popup {
background: rgba(100, 100, 100, 0.6);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup>div {
border-radius: 10px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
padding: 30px 15px;
/* Width of popup can be changed */
width: 70%;
max-width: 600px;
z-index: 5001;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: left;
border: 5px solid #f28920;
}
.popup-btn-close {
position: absolute;
background-color: #f28920;
color: white;
top: -15px;
right: -15px;
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 20px;
font-weight: bold;
font-family: 'Arial Black', Arial, sans-serif;
cursor: pointer;
-webkit-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1);
box-shadow: -3px 1px 6px 0px rgba(0, 0, 0, 0.1);
}
.popup-btn-close:hover {
background-color: #ac5918;
color: #fff;
}
.popup-text {
background: #fff;
color: #333;
font-size: 19px;
line-height: 30px;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Responsive Popup</h1>
<a class="popup-trigger" data-target="#popup1">Open PopUp 1</a>
<a class="popup-trigger" data-target="#popup2">Open PopUp 2</a>
</div>
<div id="popup1" class="popup">
<div class="popup-text">This is my popup 1</div>
<span class="popup-btn-close">×</span>
</div>
<div id="popup2" class="popup">
<div class="popup-text">This is my popup 2</div>
<span class="popup-btn-close">×</span>
</div>