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..

    How can I ensure that text is inside rounded div?

    Does HTML5 DOCTYPE affect how CSS3 effects are rendered?

    How to make liquid layout in css using em?

    how to scale an image disproportionally via css?

    how to override font-color dynamically with css color property

    Anyone know how to create CSS rectangle with one corner chopped off?

    jQuery UI sortable: how to leave css values of changed items untouched?

    How to push down second dropdown when open first ?

    How do I convert scss to css

    How to load up CSS files using Javascript?

    How to begin typing from vertical middle of textarea

    How do I tell a page to ignore internal CSS in favor of external CSS?

    How to make a stable two column layout in HTML/CSS

    how to switch to another view using css class on click in angularjs using ngclass

    css: how to make
    not highlighted when selecting text (in Chrome)

    How to select html5 range's pseudo-elements in JavaScript

    How to hide the div on click through animation css

    How to increase div width according to the text inside it?

    How to show/hide delete button with CSS?

    How can I change this HAML format to normal CSS style?

    How can I display these images with CSS instead of HTML?

    How to style a list within a menu?

    Showing divs in th on the same line

    how to make dynamically loaded image with different width and height responsive in css

    How to disable CSS in Browser for testing purposes

    How to extract text from contenteditable div (but not html tags)

    Jquery: Show/hide menu with single button

    How can I position two
    ? One from the left and one from the right of a bootstrap modal?

    How to create a jQuery scroll to edit CSS?

    How to build a complex table by using CSS?