Jump to content
Sign in to follow this  
TapeGun007

Use a CSS popup multiple times

Recommended Posts

Here is my CSS file:

 

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}
 
.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}
 
.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: orange;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

 

And here is my HTML

 

 

<a href="#popup1">Let me Pop up</a>
 
<div id="popup1" class="overlay">
  <div class="popup[]">
    <h2>Address:</h2>
    <a class="close" href="#">×</a>
    <div class="content">
      Thanks for pop me out of that button, but now i'm done so you can close this window.
    </div>
  </div>
</div>

Share this post


Link to post
Share on other sites

All of the code above works fine.  It's a single pop up window.  What if I wanted to use a pop up window for tabular data instead?  So say I pull up 10 contacts, and you click a link next to the contact for "John Doe" and his address pops up, but then I click below on to "Jane Doe" and the pop up shows her address instead?

 

How can I accomplish this?

Share this post


Link to post
Share on other sites

I woke up today, looked at the code and realized what I was missing from previous experiments!

 

This works:

 

<?php
for ($x = 0; $x <= 10; $x++) {
?>
<a href="#popup<?=$x; ?>">Let me Pop up</a>
 
<div id="popup<?=$x; ?>" class="overlay">
<div class="popup">
<h2>Address:</h2>
<a class="close" href="#">×</a>
<div class="content">
<?=$x; ?> for pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
<?
}
?>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.