Как указать определенные модели для разных элементов в html? ⇐ CSS

[Гость]

Я пытаюсь добавить более одного модального окна для нескольких элементов, но коды, которые я использую, работают только для одного элемента, и когда я пытаюсь добавить более одного, они перестают работать, пожалуйста, как это должно быть? быть сделано? Это HTML, CSS и JavaScript в одном документе:

var modal = document.getElementById("myModal"); var btn = document.getElementById("myBtn"); var span = document.getElementsByClassName("закрыть")[0]; btn.onclick = функция() { modal.style.display = "блокировать"; } span.onclick = функция() { modal.style.display = "нет"; } window.onclick = функция (событие) { if (event.target == модальный) { modal.style.display = "нет"; } body {семейство шрифтов: Arial, Helvetica, без засечек;} .модальный { дисплей: нет; положение: фиксированное; z-индекс: 1; отступ сверху: 100 пикселей; слева: 0; верх: 0; ширина: 100%; высота: 100%; переполнение: авто; цвет фона: RGB (0,0,0); цвет фона: rgba(0,0,0,0.4); } .modal-content { цвет фона: #fefefe; маржа: авто; отступ: 20 пикселей; граница: 1 пиксель, сплошная #888; ширина: 80%; } .закрывать { цвет: #аааааа; плавать: вправо; размер шрифта: 28 пикселей; начертание шрифта: жирный; } .закрыть:наведите курсор, .близко:фокус { цвет: #000; текстовое оформление: нет; курсор: указатель; Модальный пример Открыть модальное окно × Некоторый текст в модальном окне..

Я пытался добавить несколько модальных окон, но это не сработало.