在多个 css 弹出窗口中显示不同的内容

Question

我有这个 html/css 弹出代码。我想在我的页面中显示多个弹出窗口。但是当我点击另一个弹出窗口时，第一个弹出窗口的内容出现了。我怎样才能让他们显示不同的内容？谢谢。

html

<div id="closed"></div>
<a href="#popup" class="popup-link">Klik untuk memunculkan Popup</a>
<div class="popup-wrapper" id="popup">
<div class="popup-container"><!-- Konten popup, silahkan ganti sesuai kebutuhan -->
<form action="http://www.syakirurohman.net/2015/01/tutorial-membuat-popup-tanpa-javascript-jquery.html#" method="post" class="popup-form">
<h2>Conent</h2>
</div>
</form>
<!-- Konten popup sampai disini--><a class="popup-close" href="#closed">X</a>
</div>
</div>

css

a.popup-link {
padding:17px 0;
text-align: center;
margin:7% auto;
position: relative;
width: 300px;
color: #fff;
text-decoration: none;
background-color: #FFBA00;
border-radius: 3px;
box-shadow: 0 5px 0px 0px #eea900;
display: block;
}
a.popup-link:hover {
background-color: #ff9900;
box-shadow: 0 3px 0px 0px #eea900;
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
}
/* end link popup*//*style untuk popup */
#popup {
visibility: hidden;
opacity: 0;
margin-top: -200px;
}
#popup:target {
visibility:visible;
opacity: 1;
background-color: rgba(255,255,255,0.7);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
z-index: 99999999999;
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
}@media (min-width: 768px){
.popup-container {
width:600px;
}
}
@media (max-width: 767px){
.popup-container {
width:100%;
}
}
.popup-container {
position: relative;
margin:7% auto;
padding:30px 50px;
background-color: #333;
color:#fff;
border-radius: 3px;
}a.popup-close {
position: absolute;
top:1px;
right:3px;
background-color: #fff;
padding:7px 10px;
font-size: 20px;
text-decoration: none;
line-height: 1;
color:#333;
}/* style untuk isi popup */.popup-form {
margin:10px auto;
}
.popup-form h2 {
margin-bottom: 5px;
font-size: 37px;
text-transform: uppercase;
}

Answer 1

这是极简主义弹出窗口的完整代码。

$('.btn').click(function(){
  $('.popup').hide();
  $('#' + $(this).attr('data-popup')).show();
});

.popup {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  display:none;
  background:#000;
  color:#fff;
  padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup" id="popup1">
  Popup 1
  </div>
  
  <div class="popup" id="popup2">
  Popup 2
  </div>
  
  <button class="btn" data-popup="popup1">Open pop 1</button>
  <button class="btn" data-popup="popup2">Open pop 2</button>

在多个 css 弹出窗口中显示不同的内容

show different content in multiple css popups

html

css

popup