show different content in multiple css popups


Tags: html,css,popup

Problem :

I have this html/css popup code. I want multiple popups in my page. But when I click on another popup, the first popup's content comes on. How can I make them to show different content ? Thank you.

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;
}


Solution :

Here is full code for minimalist popups.

$('.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 Howto..

    div height is not showing properly

    How do you show just the first line of text of a div and expand on click?

    How to achieve navigation mouseover effect like in screenshot [closed]

    How can I make a 2-level navigation bar? [closed]

    How to make a Xul button bigger using css as it get focus?

    How to place Facebook send dialog box above other content?

    How to CSS style a table such that cells is at most 30% of screen height and use a scroll bar when it's taller?

    How to force div element to keep its contents inside container

    Mapbox GeoJSON loaded via local URL: icons not showing popup properties

    How to put image and input on the same line with css

    Framework7->CSS: How to make tabs under popover scrollable

    How to preform whitelist-based CSS filtering in PHP

    How to use Bootstrap 3 grid if elements are tiled with different height and widths

    How to build dynamic css main/sub menu's (or do I need jquery)?

    How can I center text on an image using Bootstrap?

    Why is Nexus 4 (using Chrome for Android) showing window size as 384x519 but screenshot shows 768x1038?

    How to make groups of divs the same width using only CSS?

    How to remove hover effect for some of the cells in angularjs

    How can I make this jQuery effect responsive?

    How to achieve CSS transitions with delay timers but without any easing function?

    css: How to add blank space under a sprint element

    How to repeat nth-child rules for an infinite sequence in CSS

    How to give sentence case to sentences through CSS or javascript? [closed]

    How to convert from Powerpoint to HTML / CSS ? (FOSS)

    How or where to add javascript settimeout function to CSS vertical drop down menu

    How to Fade In/Out multiple texts using CSS/jQuery like on Droplr?

    How to load CSS filed inside the body in JSP?

    How to load jQuery before CSS code?

    How do you force a website to be in landscape mode when viewed on a mobile device?

    How do you change the font-size of a custom css style?