多个响应弹出窗口在同一页

Question

我试图在我的页面添加两个响应弹出式窗口，但因为我是新的JavaScript我不能弄清楚如何修改此代码，使它适用于两者。到目前为止只有一个作品。

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">&times;</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")); 
}); 
}); 

这是我codepen Codepen

您的帮助willlll被这么多的赞赏。 非常感谢！ krystel

Answer 1

以下是单独弹出窗口的一种方法。我添加了另一个弹出div，给了他们唯一的id，然后在触发器上创建了一个data-target属性。我更改了触发器以处理包含弹出触发器类的所有事件，然后对包装器代码进行了调整，以便在当前弹出窗口中创建包装器，而不是检查是否存在任何包装器。

还有一个内存泄漏，因为每次你打开一个弹出窗口，你附加更多的事件处理程序，而不是只附加一次。我强烈建议你重做它们以避免问题的发生。将它们转换为文档上的全局事件而不是每次弹出。我没有在下面更改它们，因为我想要一个最小的更改集，以便您可以看到您的问题需要什么。

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">&times;</span> 
 
</div> 
 
<div id="popup2" class="popup"> 
 
    <div class="popup-text">This is my popup 2</div> 
 
    <span class="popup-btn-close">&times;</span> 
 
</div>