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

Question

Sooo ..我有这个html/css弹出窗口代码。 我想在我的页面中有多个弹出窗口，但是当我点击另一个弹出窗口时，它只会显示html中第一个弹出窗口的内容。 如何让他们显示不同的内容？

这是代码：

html: 
     <div class="box"> 
     <a class="button" href="#popup1">Click Here</a> 
    </div> 
    <div id="popup1" class="overlay"> 
     <div class="popup"> 
      <h2>Here I am</h2> 
      <a class="close" href="#">Close</a> 
      <div class="content"> 
       This is the content 
      </div> 
     </div> 
    </div> 

Css: 

body { 
    font-family: Arial, sans-serif; 
    background: url(4.jpg); 
    background-size: cover; 
    color:black; 

} 

h1 { 
    text-align: center; 
    font-family: Tahoma, Arial, sans-serif; 
    color: black; 
    margin: 100px 0; 
} 

.box { 
    width: 20%; 
    margin: 0 auto; 
    background: rgba(255,255,255,0.2); 
    padding: 35px; 
    border: 2px solid #fff; 
    border-radius: 20px/50px; 
    background-clip: padding-box; 
    text-align: center; 
} 

.button { 
    font-size: 1em; 
    padding: 10px; 
    color: black; 
    border: 2px solid red; 
    border-radius: 20px/50px; 
    text-decoration: none; 
    cursor: pointer; 
    transition: all 0.3s ease-out; 
} 
.button:hover { 
    background: red; 
} 

.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: red; 
} 
.popup .content { 
    max-height: 30%; 
    overflow: auto; 
} 

Answer 1

所有你需要做的是建立多个弹出的div，并指定目标。可悲的是，你不能使用相同的弹出div来显示内容，而不使用JavaScript。 下面是一个快速的fiddle来演示如何做到这一点。

<div class="box"> 
    <a class="button" href="#popup2">Click Here 2</a> 
</div> 
<div id="popup2" class="overlay"> 
    <div class="popup"> 
     <h2>Here I am</h2> 
     <a class="close" href="#">&times;</a> 
     <div class="content">This is the content from 2</div> 
    </div> 
</div>