Почему не получается сделать несколько всплывающих окон?

Question

[Samalamadoit]

<div class="hp-section">
								<div class="hp-sub-tit">
									<h4><span>Галерея</span> номера</h4>
									<p>Задача организации, в особенности же реализация намеченных плановых заданий представляет собой интересный эксперимент проверки новых предложений.</p>
								</div>
								<div class="">
									<div class="h-gal">
										<ul>
											<li>
												<div class="material-placeholder">
													<div class="page-wrapper">
													  <a href="#modal_1" class="btn trigger" ><img class="materialboxed initialized" data-caption="Hotel Captions" src="http://lena204b.beget.tech/wp-content/uploads/2018/07/3.jpg" alt=""></a>
													</div>
													
												</div>
											</li>
											<li>
												<div class="material-placeholder">
													<div class="page-wrapper">
													  <a class="btn trigger" href="#modal_2"><img class="materialboxed initialized" data-caption="Hotel Captions" src="http://lena204b.beget.tech/wp-content/uploads/2018/07/2.jpg" alt=""></a>
													</div>
													
												</div>
											</li>
											<li>
												<div class="material-placeholder">
													<div class="page-wrapper">
													  <a class="btn trigger" href="#modal_3"><img class="materialboxed initialized" data-caption="Hotel Captions" src="http://lena204b.beget.tech/wp-content/uploads/2018/07/3.jpg" alt=""></a>
													</div>
													
												</div>
											</li>
											<li>
												<div class="material-placeholder">
													<div class="page-wrapper">
													  <a class="btn trigger" href="#modal_4"><img class="materialboxed initialized" data-caption="Hotel Captions" src="http://lena204b.beget.tech/wp-content/uploads/2018/07/3.jpg" alt=""></a>
													</div>
													
												</div>
											</li>
											<li>
												<div class="material-placeholder">
													<div class="page-wrapper">
													  <a class="btn trigger" href="#modal_5"><img class="materialboxed initialized" data-caption="Hotel Captions" src="http://lena204b.beget.tech/wp-content/uploads/2018/07/3.jpg" alt=""></a>
													</div>
													
												</div>
											</li>
											<li>
												<div class="material-placeholder">
													<div class="page-wrapper">
													  <a class="btn trigger" href="#modal_6"><img class="materialboxed initialized" data-caption="Hotel Captions" src="http://lena204b.beget.tech/wp-content/uploads/2018/07/3.jpg" alt=""></a>
													</div>
													
												</div>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<!-- Модальное окно -->
							<div id="modal_1" class="modal-wrapper">
							  <div  class="modal">
							    <div class="head">
							      <a class="btn-close trigger" href="#">
							        <i class="fa fa-times" aria-hidden="true"></i>
							      </a>
							    </div>
							    <div class="content">
							        <div class="good-job">
							          <img style="width: 100%;" class="materialboxed initialized" data-caption="Hotel Captions" src="http://lena204b.beget.tech/wp-content/uploads/2018/07/3.jpg" alt="">
							        </div>
							    </div>
							  </div>
							</div>
							<div id="modal_2" class="modal-wrapper">
							  <div class="modal">
							    <div class="head">
							      <a class="btn-close trigger" href="#">
							        <i class="fa fa-times" aria-hidden="true"></i>
							      </a>
							    </div>
							    <div class="content">
							        <div class="good-job">
							          <img style="width: 100%;" class="materialboxed initialized" data-caption="Hotel Captions" src="http://lena204b.beget.tech/wp-content/uploads/2018/07/2.jpg" alt="">
							        </div>
							    </div>
							  </div>
							</div>
							<div id="modal_3" class="modal-wrapper">
							  <div class="modal">
							    <div class="head">
							      <a class="btn-close trigger" href="#">
							        <i class="fa fa-times" aria-hidden="true"></i>
							      </a>
							    </div>
							    <div class="content">
							        <div class="good-job">
							          <img style="width: 100%;" class="materialboxed initialized" data-caption="Hotel Captions" src="http://lena204b.beget.tech/wp-content/uploads/2018/07/2.jpg" alt="">
							        </div>
							    </div>
							  </div>
							</div>
							<div id="modal_4" class="modal-wrapper">
							  <div class="modal">
							    <div class="head">
							      <a class="btn-close trigger" href="#">
							        <i class="fa fa-times" aria-hidden="true"></i>
							      </a>
							    </div>
							    <div class="content">
							        <div class="good-job">
							          <img style="width: 100%;" class="materialboxed initialized" data-caption="Hotel Captions" src="http://lena204b.beget.tech/wp-content/uploads/2018/07/2.jpg" alt="">
							        </div>
							    </div>
							  </div>
							</div>
							<div id="modal_5" class="modal-wrapper">
							  <div class="modal">
							    <div class="head">
							      <a class="btn-close trigger" href="#">
							        <i class="fa fa-times" aria-hidden="true"></i>
							      </a>
							    </div>
							    <div class="content">
							        <div class="good-job">
							          <img style="width: 100%;" class="materialboxed initialized" data-caption="Hotel Captions" src="http://lena204b.beget.tech/wp-content/uploads/2018/07/2.jpg" alt="">
							        </div>
							    </div>
							  </div>
							</div>
							<div id="modal_6" class="modal-wrapper">
							  <div class="modal">
							    <div class="head">
							      <a class="btn-close trigger" href="#">
							        <i class="fa fa-times" aria-hidden="true"></i>
							      </a>
							    </div>
							    <div class="content">
							        <div class="good-job">
							          <img style="width: 100%;" class="materialboxed initialized" data-caption="Hotel Captions" src="http://lena204b.beget.tech/wp-content/uploads/2018/07/2.jpg" alt="">
							        </div>
							    </div>
							  </div>
							</div>

Comments

[Максим Тимофеев]

Я удивлен, что Вы привели только html, надо было еще css, цвет глаз консьержа и длину ковра в гостинной. Что бы завершить ряд бесполезной информации в рамках этого вопроса.
Все кроме js - залог отсутствия ответов.

[Samalamadoit]

Максим Тимофеев,

$( document ).ready(function() {
  $('.trigger').on('click', function() {
     $('.modal-wrapper').toggleClass('open');
    $('.page-wrapper').toggleClass('blur-it');
     return false;
  });
});

[Максим Тимофеев]

Samalamadoit, вероятно строит для .trigger задать дата атрибут в котором хранить id и открывать нужный modal-wrapper

Answer 1

[Максим Тимофеев]

они не работают без js. Одно, два, миллион - если только html - работать не будет.