Использование нескольких ссылок для одного модального

Question

Итак, я пытаюсь поместить несколько модальных ссылок на одну страницу, но когда каждый из них щелкнут, тот же модальный открывается для всех ссылок, потому что все они используют # target- содержание. Мне очень нравится этот специфический модальный, но есть ли способ не иметь того же модального открытия на основе кода ниже? Спасибо!

HTML

<a href="#target-content" id="button">Open A Modal</a> 

<div id="target-content"> 
    <a href="#" class="close"></a> 
    <div id="target-inner"> 
    <h2>Modal Heading</h2> 
    <p>Modal Content</p> 
    </div> 
</div> 

CSS

#target-content { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    pointer-events: none; 
    opacity: 0; 
    -webkit-transition: opacity 200ms; 
    transition: opacity 200ms; 
} 

#target-content:target { 
    pointer-events: all; 
    opacity: 1; 
} 

#target-content #target-inner { 
    position: absolute; 
    display: block; 
    padding: 48px; 
    line-height: 1.8; 
    width: 70%; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    -ms-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2); 
    background: white; 
    color: #34495E; 
} 

#target-content #target-inner h2 { margin-top: 0; } 

#target-content #target-inner code { font-weight: bold; } 

#target-content a.close { 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: #34495E; 
    opacity: 0.5; 
    -webkit-transition: opacity 200ms; 
    transition: opacity 200ms; 
} 

#target-content a.close:hover { opacity: 0.4; } 

Answer 1

Ваш только предполагается использовать ID-имя # один раз.

Изменить имя # целевого содержания идентификаторов, # мишени-Content1 и т.д ..,

Вы можете использовать один и те же таблицы стили с .class-именем, но # Идами имен должны быть уникальными ,