如何根据元素ID制作动态模态窗口？

Question

我有一个带有目录的网站。我想做的是一个模式窗口，当我单击产品卡时会打开该窗口，其中包含有关产品的其他信息和照片。我已经为所有产品制作了特殊的ID，但是我无法创建脚本。有简单的解决方案吗？

Image

我在Codepen上的完整代码

$(".clothes_js").click(function() {
  $(".cl-item").hide();
  $(".clothes").show("fast");
  $(".boots").show("fast");
});

$(".hzt_js").click(function() {
  $(".cl-item").hide();
  $(".cl-item.ph").show("fast");
  $(".cl-item.sl").show("fast");
  $(".cl-item.tr").show("fast");
});

$(".pled_js").click(function() {
  $(".cl-item").hide();
  $(".cl-item.pled").show("fast");
});

function catalog() {
    document.getElementById("cg").style.display = "grid";
    document.getElementById("cl").style.display = "grid";
    document.getElementById("back-btn").style.visibility = "visible";
};

$(".back-btn").click(function() {
    $('html,body').animate({
        scrollTop: $(".cg-dummy").offset().top},
        'slow');
});

// FLickity Start

$('.slideshow').flickity({
  // options
  cellAlign: 'center',
  contain: true,
  wrapAround: true, 
  autoPlay: 5000, 
  prevNextButtons: false,
  cellSelector: '.ss-item'
});

/*----------------------------------------*\
	#ESSENTIALS
\*----------------------------------------*/

:root {
	--dark-blue: #34495e;
	--green: #27ae60;
	--shadow: 0 0 30px 1px rgba(104, 104, 104, 0.8);
	--b_green: 3px solid var(--green);
	--orange: #e67e22;
	--gradient : linear-gradient(to bottom right, #00e5ff, #2ecc71);
	--gradient_shadow: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3))
}


/*------------------
	!COLORS
------------------*/

.blue         {	background-color: #1078A4; }

.biruza       {	background-color: #00939A; }

.siren        {	background-color: #C13C8D; }

.malina       {	background-color: #E76F77; }

.corall       {	background-color: #E44440; }

.an-dark-blue {	background-color: #24204A; }

.olive        { background-color: #635836; }

.baklajan 	  {	background-color: #503944; }

.grey         {	background-color: grey;    }

.cream {	
	background-color: #E9C4AA;
	color: var(--dark-blue);
}

.gradient {	
	background: var(--gradient);
	color: var(--dark-blue);
}

.white {
	background-color: white;
	color: var(--dark-blue);
}

.yellow {
	background-color: #FFCE65;
	color: var(--dark-blue);
}


/*------------------
	!ANIMATIONS
------------------*/

@-webkit-keyframes pulse {
	0% {
		border: 3px solid rgba(39, 174, 96, 1)
	}

	50% {
		border: 3px solid rgba(39, 174, 96, 0);
	}

	100% {
		border: 3px solid rgba(39, 174, 96, 1);
	}
}
@-o-keyframes pulse {
	0% {
		border: 3px solid rgba(39, 174, 96, 1)
	}

	50% {
		border: 3px solid rgba(39, 174, 96, 0);
	}

	100% {
		border: 3px solid rgba(39, 174, 96, 1);
	}
}
@-moz-keyframes pulse {
	0% {
		border: 3px solid rgba(39, 174, 96, 1)
	}

	50% {
		border: 3px solid rgba(39, 174, 96, 0);
	}

	100% {
		border: 3px solid rgba(39, 174, 96, 1);
	}
}
@keyframes pulse {
	0% {
		border: 3px solid rgba(39, 174, 96, 1)
	}

	50% {
		border: 3px solid rgba(39, 174, 96, 0);
	}

	100% {
		border: 3px solid rgba(39, 174, 96, 1);
	}
}


/*------------------
	!MAIN
------------------*/

body {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	/*font-family: 'Pacifico', cursive;*/
	text-align: center;
}

html, body {
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

* {
	box-sizing: border-box;
}

img {
	max-width:100%;
	max-height:100%;
}

.dummy {
	visibility: hidden;
}






/*----------------------------------------*\
	#ESSENTIALS
\*----------------------------------------*/

.navbar {
	position             : relative;
	top                  : 0;
	display              : grid;
	grid-template-columns: 1fr 1fr 1fr;
	justify-items        : center;
	align-items          : center;
	width                : 100%;
	padding              : 10px;
	background-color     : var(--dark-blue);
}

.home-btn a img {
	margin    : 0;
	border    : 3px solid white;
	min-width : 180px;
	min-height: 80px;
}

tr > td {
	padding    : 3px 0;
	text-align : left;
	color      : var(--green);
	font-weight: bold;
}

td img {
	float       : right;
	margin-right: 5px;
	width       : 20px;
	height      : 20px;
}


/*------------------
	!SLIDESHOW
------------------*/

.slideshow {
	background: var(--dark-blue);
	position  : relative;
}

.ss-item {
	width       : 100%;
	height      : 80vh;
	margin-right: 0;
	background  : var(--green);
	font-size   : 1.25em;
}

.ss-item:nth-child(1) {
	background         : url(../img/ss1.jpg) no-repeat;
	background-size    : cover;
	background-position: center center;
}

.ss-item:nth-child(2) {
	background         : url(../img/ss2.jpg) no-repeat;
	background-size    : cover;
	background-position: center center;
}

.ss-item:nth-child(3) {
	background         : url(../img/ss3.jpg) no-repeat;
	background-size    : cover;
	background-position: center center;
}

.ss-item:nth-child(4) {
	background         : url(../img/ss4.jpg) no-repeat;
	background-size    : cover;
	background-position: center center;
}

.ss-item:nth-child(5) {
	background         : url(../img/ss5.jpg) no-repeat;
	background-size    : cover;
	background-position: center center;
}

.ss-item__text {
	position: absolute;
	left    : 50px;
	bottom  : 50px;
	width   : 90%;
}

.ss-item__h1 {
	margin : 0;
	padding: 10px;
	float  : left;
	display: inline-block;
	color  : white/*var(--green)*/;
	/*background: var(--dark-blue);*/
}

.ss-item__p {
	margin      : 0;
	padding     : 10px;
	width       : 80%;
	float       : left;
	clear       : left;
	display     : inline-block;
	color       : white/*var(--green)*/;
	text-align  : left;
	/*background: var(--dark-blue);*/
}


.slideshow .flickity-page-dots {
	bottom : 0.5em;
	opacity: 1;
}

.slideshow .flickity-page-dots .dot {
	width     : 10px;
	height    : 10px;	
	background: #ccc;
	border    : 2px solid transparent;
}

.slideshow .flickity-page-dots .dot.is-selected {
	background: #76ff03;
}


/*------------------
	!INFO
------------------*/

.info {
	display           :grid;
	grid-template-rows: 1fr 1fr;
	margin            : 20px;
	box-shadow        : var(--shadow);
}

.info__text {
	background  : var(--dark-blue);
	color       : var(--green);
	text-align  : center;
	font-size   : 1.2em;
	border-top  : 3px solid var(--green);
	margin      : 0;
	padding     : 20px;
	/*box-shadow: var(--shadow);*/
}

.info__map iframe {
	height: 100%;
	width : 100%;
}






/*----------------------------------------*\
	#CATALOG STUFF
\*----------------------------------------*/


/*------------------
	!DUMMY
------------------*/


.cg-dummy {
	position           : relative;
	width              : 100%;
	height             : 500px;
	background         : url(../img/catalog.jpg);
	background-size    : cover;
	background-position: center center;
	background-color   : #000;
	box-shadow         : var(--shadow);
	box-sizing         : border-box;
	display            : -webkit-flex;
	display            : -moz-flex;
	display            : -ms-flex;
	display            : -o-flex;
	display            : flex;
	justify-content    : center;
	align-items        : center;
	margin             : 30px auto;
	cursor             : pointer;
	transition         : opacity .7s ease-in-out;
}

.cg-dummy:hover {
	opacity: 0.8;
}

.cg-dummy h1 {
	font-weight: bold;
	color      : var(--green);
	padding    : 10px;
	border     : 3px solid var(--green);
	transition : opacity 1s ease-in-out;
}

.cg-dummy:hover h1 { opacity: .7; }


/*------------------
	!CATEGORIES
------------------*/

.cg {
	display: none;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(382px, 1fr));
	grid-template-rows: 1fr;
	margin: 0 20px;
}


.cg-h1 {
	display      : none;
	text-align   : center;
	font-size    : 2.5em;
	color        : var(--green);
	margin       : 20px auto;	
	cursor       : pointer;
	padding      : 5px;
	border-radius: 5px;
}

 
.cg-item {
	background: var(--dark-blue);
	display: flex;
  	justify-content: center;
  	align-items: center;
  	flex-wrap: wrap;
 	min-height: 100px;
	border: none;
	outline: none;
	border-bottom: 3px solid var(--green);
	box-shadow: 0 0 5px 1px rgba(104, 104, 104, 0.8)/*var(--shadow)*/;
}

.cg-item:focus {
	border-right: var(--b_green);
	border-left: var(--b_green);
	border-top: var(--b_green);
}

.cg-item h1 {
	position: relative;
	font-size: 2.3em;
	color: var(--green);
}

.cg-item:nth-child(1) h1::before {
	content: "";
  	position: absolute;
  	margin: 0 auto;
  	left: -70px;
  	top: 50%;
  	transform: translateY(-50%);
  	background: url(../svg/fashion.svg);
  	-webkit-background-size: 50px 50px;
  	background-size: 50px 50px;
  	width: 50px;
  	height: 50px;
}

.cg-item:nth-child(2) h1::before {
	content: "";
  	position: absolute;
  	margin: 0 auto;
  	left: -70px;
  	top: 50%;
  	transform: translateY(-50%);
	background: url(../svg/dish.svg);
  	-webkit-background-size: 50px 50px;
  	background-size: 50px 50px;
  	width: 50px;
  	height: 50px;
}

.cg-item:nth-child(3) h1::before {
	content: "";
  	position: absolute;
  	margin: 0 auto;
  	left: -70px;
  	top: 50%;
  	transform: translateY(-50%);
	background: url(../svg/armchair.svg);
  	-webkit-background-size: 50px 50px;
  	background-size: 50px 50px;
  	width: 50px;
  	height: 50px;
}

.back-btn {
	position: fixed;
	bottom: 5%;
	right: 5%;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	border: 2px solid var(--green);
	background: var(--dark-blue);
	z-index: 160;
	cursor: pointer;
	color: var(--orange);
	visibility: hidden;
}


/*------------------
	!CATALOG
------------------*/

.cl {
	display: none;
	grid-template-columns: repeat(auto-fit, 340px);
	grid-template-rows: 1fr;
	grid-gap: 20px;
	justify-items: center;
	align-items: center;
	justify-content: space-evenly;
	align-content: center;
	margin: 20px 0;
}

.cl::after {
	content: "";
	display: table;
	clear: both;
}

.cl-item {
  	display: grid;
  	grid-template-rows: repeat(4, 70px) 70px 15px;
  	grid-template-columns: 320px;
  	box-shadow: var(--shadow);
  	width: 320px;
  	height: 364px;
  	/*float: left;*/
}

.cl-item::after {
  content: "";
  display: table;
  clear: both;
}

.cl-item img {
	grid-row: 1/5;
	display: block;
	height: 100%; 
	width: 100%; 
	object-fit: fill;
}

.cl-item__info {
	grid-row: 6/7;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

	.cl-item__color {
		display: block;
		height: 100%; 
		width: 100%; 
		text-align: center;
		color: white /*var(--orange)*/;
		font-size: 12px;
		font-style: italic;
	}

	.cl-item__size {
		display: block;
		height: 100%; 
		width: 100%; 
		background-color: var(--dark-blue);
		text-align: center;
		color: var(--orange);
		font-size: 12px;
		font-style: italic;
	}

.cl-item p {
	/*display: inline;*/
	grid-row: 5/6;
	display: flex;
  	justify-content: center;
  	align-items: center;
  	flex-wrap: wrap;
	background-color: var(--dark-blue);
	border-top: 4px solid var(--green);
	box-sizing: border-box;
	font-size: 19.2px;
	color: var(--green);
  	height: 100%;
  	margin: 0;
}


.clothes img, .boots img {
  /*width: 70%;*/
  object-fit: contain;
}






/*----------------------------------------*\
	#ESSENTIALS
\*----------------------------------------*/


/*------------------
	!MEDIA
------------------*/


@media (min-width: 1280px) {

	.info {
		display:grid;
		grid-template-rows: 1fr;
		grid-template-columns: 1fr 1fr;
	}

	.info__text {
		border-top: none;
		border-left: 3px solid var(--green);
	}
}

@media (max-width: 990px) {

	body {
		font-size: 12px;
	}

	.ss-item__text {
		position: absolute;
		bottom    : 30px;
		left    : 30px;
		width   : 90%;
		font-size: .8em;
	}
	.info {
		display           :grid;
		grid-template-rows: 300px 1fr;
		margin            : 20px;
		box-shadow        : var(--shadow);
	}

	.cg {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		margin: 0;
	}
	

	.cg-item h1 {
		font-size: 1.4em;
	}
	
	.cg-item:nth-child(3) h1::before {
		content: "";
	  	position: absolute;
	  	margin: 0 auto;
	  	left: -60px;
	  	top: 50%;
	  	transform: translateY(-50%);
		background: url(../svg/armchair.svg);
	  	-webkit-background-size: 50px 50px;
	  	background-size: 50px 50px;
	  	width: 50px;
	  	height: 50px;
	}
	
}

@media (max-width: 500px) {
	.navbar {
	    grid-template-columns: 1fr;
	    grid-template-rows: repeat(2, 1fr);
  	}
  
  	.dummy {
    	display: none;
   	}
}

@media (max-width: 361px) {

	.navbar-number {
		margin: 20px auto;
	}

	.cg-dummy {
		height: 200px;
	}

	.ss-item__text {
		position: absolute;
		bottom  : 30px;
		left    : 20px;
		width   : 90%;
		font-size: .7em;
	}

	.cg-item {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		font-size: 1.2em;
	}

	.cg-item img {
		width: 30px;
		height: 30px;

	}

	.cl-item {
		margin: 20px auto;
	}



}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>TextileToday</title>
	<link rel="stylesheet" href="css/style.css?v=9">
	<link rel="stylesheet" href="css/flickity.css">
	<link href="https://fonts.googleapis.com/css?family=Pacifico|Roboto" rel="stylesheet">
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/flickity.pkgd.min.js"></script>
	<script src="js/myScript.js?v=9"></script>
</head>
<body>

	<nav class="navbar">

			
			<div class="info-tb  dummy">

				<table>

				  <tr>
				    <td><img src="https://picsum.photos/20/20" alt=""></td>
				    <td>84955100075</td> 
				  </tr>


				  <tr>
				  	<td><img src="https://picsum.photos/20/20" alt=""></td>
				    <td>@Textile2day</td> 
				  </tr>


				  <tr>
				    <td><img src="https://picsum.photos/20/20" alt=""></td>
				    <td>info.torgservice@bk.ru</td> 
				  </tr>

				</table>

			</div>


			<div class="home-btn">
				<a href="#home"><img src="img/logo.png" alt=""></a>
			</div>
			

			<div class="info-tb__header">

				<table>

				  <tr>
				    <td><img src="svg/telephone.svg" alt=""></td>
				    <td>84955100075</td> 
				  </tr>


				  <tr>
				    <td><img src="svg/instagram.svg" alt=""></td>
				    <td>@Textile2day</td> 
				  </tr>


				  <tr>
				    <td><img src="svg/email.svg" alt=""></td>
				    <td>info.torgservice@bk.ru</td> 
				  </tr>

				</table>

			</div>


	</nav>
	





	<section class="slideshow">


		<div class="ss-item">
			<div class="ss-item__text">
				<h1 class="ss-item__h1">Новое поколение</h1>
				<p class="ss-item__p">Велсофт — это синтетика нового поколения. Ткань называют также микрофиброй. Страна рождения – Япония. Именно здесь, на островах высоких технологий, в 1976 году был разработан способ изготовления уникальных, ультратонких волокон, диаметр которых не превышает 0,06 мм</p>
			</div>
		</div>


		<div class="ss-item">
			<div class="ss-item__text">
				<h1 class="ss-item__h1">Комфорт</h1>
				<p class="ss-item__p">Велсофт создан для домашнего комфорта и уюта. Её пушистый, мягкий ворс напоминает велюр, но отличается особой шелковистостью и нежностью. Изделия из этого материала дарят и взрослым, и детям ощущения особого домашнего тепла и покоя</p>
			</div>
		</div>


		<div class="ss-item">
			<div class="ss-item__text">
				<h1 class="ss-item__h1">Дышащая ткань</h1>
				<p class="ss-item__p">Наличие достаточно длинного и воздушного ворса, необыкновенно тёплого и приятного на ощупь, приводит к тому, что изделие почти мгновенно достигает температуры человеческого тела, в последующем сохраняя полученное тепло. Одежда из велсофта препятствует перегреву даже в очень тёплом помещении</p>
			</div>
		</div>


		<div class="ss-item">
			<div class="ss-item__text">
				<h1 class="ss-item__h1">Безопасность</h1>
				<p class="ss-item__p">Велсофт производят в полном соответствии с нормами международной системы сертификации и тестирования изделий из текстиля Эко Текс, что делает его пригодным для производства домашней и детской одежды</p>
			</div>
		</div>


		<div class="ss-item">
			<div class="ss-item__text">
				<h1 class="ss-item__h1">Гипоалергенность</h1>
				<p class="ss-item__p">Микрофибра — гипоаллергенная ткань, состоящая из полимерных и натуральных волокон, в том числе нейлона, полиэстера, хлопка или вискозы. Ткань широко применяется при производстве одежды, мебели, в промышленности. В ее основе — ультратонкие волокна, в 10 раз меньше диаметра волокна натурального шелка</p>
			</div>
		</div>


	</section>





	
	<div class="cg-dummy" id="cg-dummy" onclick="catalog()">
		<h1 id="dummy__h1">Каталог</h1>
	</div>	
	

	<div class="cg" id="cg">


		<button class="cg-item  сlothes_js">
			<h1>Одежда</h1>
		</button>


		<button class="cg-item  hzt_js">
			<h1>Хозтовары</h1>
		</button>


		<button class="cg-item  pled_js">
			<h1>Товары для дома</h1>
		</button>


	</div>


	<div class="back-btn" id="back-btn"><img src="svg/upload.svg" alt=""></div>


	<div class="cl" id="cl">
		
		<!--------------------------
			ТОВАРЫ ДЛЯ ДОМА
		-------------------------->

		<!------------
			DPLED
		------------->

		<div class="cl-item pled" id="A000">
			<img src="img/dpled/dpled1.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color cream">Кремовый</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			 </div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A001">
			<img src="img/dpled/dpled2.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color blue">Голубой</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A002">
			<img src="img/dpled/dpled3.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color biruza">Бирюза</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A003">
			<img src="img/dpled/dpled4.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color siren">Сирень</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A004">
			<img src="img/dpled/dpled5.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color malina">Малина</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A005">
			<img src="img/dpled/dpled6.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color corall">Коралл</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A006">
			<img src="img/dpled/dpled7.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color malina">Малина</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A007">
			<img src="img/dpled/dpled8.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color corall">Коралл</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A008">
			<img src="img/dpled/dpled9.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color biruza">Бирюза</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A009">
			<img src="img/dpled/dpled10.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color siren">Сирень</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A010">
			<img src="img/dpled/dpled11.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color cream">Кремовый</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A011">
			<img src="img/dpled/dpled12.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color blue">Голубой</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A012">
			<img src="img/dpled/dpled13.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color corall">Коралл</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A013">
			<img src="img/dpled/dpled14.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color malina">Малина</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A014">
			<img src="img/dpled/dpled15.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color blue">Голубой</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A015">
			<img src="img/dpled/dpled16.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color siren">Сирень</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A016">
			<img src="img/dpled/dpled17.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color biruza">Бирюза</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A017">
			<img src="img/dpled/dpled18.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color cream">Кремовый</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<!------------
			OPLED
		------------->

		<div class="cl-item pled" id="A018">
			<img src="img/opled/opled1.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color an-dark-blue">Темно-Голубой</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A019">
			<img src="img/opled/opled2.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color olive">Оливковый</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A020">
			<img src="img/opled/opled3.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color baklajan">Баклажан</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>


		<div class="cl-item pled" id="A021">
			<img src="img/opled/opled4.jpg" alt="">
			<div class="cl-item__info">
				<div class="cl-item__color baklajan">Баклажан</div>
				<div class="cl-item__size">150x200cm, 200x220cm</div>
			</div>
			<p>Плед из велсофта</p>
		</div>




	<script src="js/myScript.js"></script>
	<script src="js/flickity.pkgd.min.js"></script>
</body>
</html>

<!-- (.cl-item>im id="0000"g.ph$+p{Lorem ipsum dolor.})*4 -->

Answer 1

简单而简单的方法就是创建一个简单的div。按照您希望模态出现的方式对其进行样式设置。相应地调整z-index。将显示设置为无。

单击产品时，使用所需的详细信息设置div的innerHTML，并将显示设置为块。

您还可以集成引导程序模式，但尝试自己编写一个基本示例以了解其工作原理。