javascript - 如何根据元素id制作动态模态窗口？-6ren

javascript - 如何根据元素id制作动态模态窗口？

转载作者：行者123 更新时间：2023-11-28 01:20:19

我有一个带有目录的网站。我想要做的是一个模态窗口，当我点击产品卡片时打开它，它有关于产品的其他信息和照片。我已经为所有产品制作了特殊的 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 -->

最佳答案

一种粗略而简单的方法是制作一个简单的 div。按照您希望模态出现的方式设置样式。相应地调整 z-index。将显示设置为无。

当产品被点击时，将div的innerHTML设置为你想要的细节，并将显示设置为 block 。

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

关于javascript - 如何根据元素id制作动态模态窗口？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51544258/

文章推荐： javascript - 使用 html 中的参数调用 javascript 函数

文章推荐： html - 在 SQL Server 中使用存储过程从数据库中获取数据

文章推荐： php - Html 页面作为 wordpress 托管中的主页

文章推荐： javascript - 使固定的 div 滚动随页面滚动。 (方形空间)

python - 为什么 id(id) 和 id(id(id)) 总是返回相同的值，而 id(id(id(id))) "loops"超过 3 个值？
出现在 python 2.7.8 中。 3.4.1 不会发生这种情况。示例: >>> id(id) 140117478913736 >>> id(id) 140117478913736 >>> id
javascript - ID、唯一 ID、客户端 ID、唯一客户端 ID、静态客户端 ID？
好吧，我对动态创建的控件的 ID 很困惑。 Public Class TestClass Inherits Panel Implements INamingContainer
java - Stackoverflow 和 Hibernate 使用 sql IN (id, id, id, id..id)
我收到下面的错误，说有堆栈溢出。发生这种情况是因为带有 IN (id, id, id...id) 的 SQL 语句有大量参数。有没有什么办法解决这一问题？这是在我使用 Eclipse 的本地环境中发生
python - 为什么 CPython 中 id({}) == id({}) 和 id([]) == id([]) ？
为什么 CPython(不知道其他 Python 实现)有以下行为？ tuple1 = () tuple2 = ()
python - 为什么 CPython 中的 id({}) == id({}) 和 id([]) == id([])？
为什么 CPython(对其他 Python 实现一无所知)有以下行为？ tuple1 = () tuple2 = ()
.net - 属性 'ID' : ID or Id? 的正确命名约定是什么
非常简单的问题:当我有一个持久对象时，它通常有一个名为 ID 的属性(对于抽象类)。那么..命名约定是ID还是Id？例如。 public int ID { get; set; } 或 public
java - ID 必须存在于容器中或作为生成的列，缺少 id : id
知道为什么我会收到此错误，我已经尝试了所有命名约定(小写/大写) 我正在使用 Vaadin，这是我的代码片段: public class Usercontainer extends BeanI
python - 为什么 id({}) == id({}) 和 id([]) == id([]) 在 CPython 中？
为什么 CPython(不知道其他 Python 实现)有以下行为？ tuple1 = () tuple2 = ()
sql - shift id's of table alike (id = id + 1) 其中 id 是主键
我需要改变表的所有主键 UPDATE TODO SET id = id + 1 但我做不到(Demo 来自 Ahmad Al-Mutawa 的回答)描述了原因。主键不能这样改。我也不能根据这是 sq
mysql - JOIN ids 以 0 作为父 id，查询具有不同父 id 的 id
我正在尝试列出与用户相关的讨论列表。想象一下，如果你愿意的话: posts -------------------------------------------------------------
php - Mysql group_concat(id) 作为左连接中的 ids 并使用 ids 选择 id 组中的所有列
我有一个表，其中包含一些具有自己的 ID 和共享 SKU key 的文章。我尝试使用左连接进行查询，并使用组结果获取从查询返回的所有 id。我的数据结构是这样的: id - name -
mysql - 为什么 `if(id=max(id), id, id+1)` 在 mysql 中没有按预期工作
在下表People中: id name 1 James 2 Yun 3 Ethan 如果我想找到最大 ID，我可以运行此查询 select max(id) id from People; 结果是
javascript - 如何通过单击子 ID 找到父 ID，然后通过 jquery 获取父 ID 来查找子 ID
我正在产品页面上创建评论模块，其中显示垃圾评论选项，并显示 onclick 显示和隐藏弹出窗口。现在它在单个评论中工作正常但是当评论是两个时它同时打开两个因为类是相同的。现在这就是为什么我想要获取父
c# - 如果实体没有 ID，是否可以让 NHibernate 自动生成 ID，或者如果实体已经有 ID，是否可以使用实体的 ID？
根据 REST 哲学，PUT操作应该(取自维基百科): PUT http://example.com/resources/142 Update the address member of the co
javascript - 如何以编程方式获取属性 ID、 View ID 和帐户 ID？
我想知道如何在使用 PHP 或 JavaScript 进行身份验证后从 Google Analytics 获取 Property Id、View Id 和 Account Id？因为我希望能够将它们存
javascript - 我想使用所选按钮的 id，但如何从中获取 id？ this.id 不起作用
我想使用所选按钮的 ID 进行删除。但我不知道如何从中获取/获取 id。我尝试了 this.id 但不起作用。这是我创建按钮的地方: var deleteEmployer= document.cre
php - 通过给定的 ID 获取所有相关的父 ID 和子 ID
我有一个具有以下结构的表“表” ID LinkedWith 12 13 13 12 14 13 15 14 16
sql - 您如何找到一条链的原始 ID、第一个 ID 和最后一个 ID？
请不要在未阅读问题的情况下将问题标记为重复。我确实发布了一个类似的问题，但 STACKOVERFLOW 社区成员要求我单独重新发布修改后的问题，因为考虑到一个小而微妙的修改，解决方案要复杂得多。假设
Java 类构造函数 this.id = id 或 this.setId(id)
在 Android Studio 中，我创建了一个 Person.java 类。我使用Generate 创建了getter 和setter 以及构造函数。这是我的 Person.java 类: pu
jquery - 显示#id - 当悬停另一个#id 时隐藏#id
如何在 jQuery 中制作这样的东西: //这是显示的主体 ID //当我悬停 #hover-id 时，我希望 #principal-id 消失并更改。但是当我将光标放在 #this-id 上时

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何根据元素id制作动态模态窗口？