多個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>