Я сделал целевую страницу с товарами. Каждый товар имеет описание и цену. Когда вы нажимаете кнопку «всплывающее окно», следует открыть, с изображением и описанием. Вопрос в том, что, если у меня есть много товаров, поэтому с html и некоторым фреймворком, мне нужно будет сделать все описание в html, могу ли я как-то создать шаблон всплывающего окна и предоставить описание товаров во всплывающем окне через javascript?Всплывающее окно на целевой странице
В основном вам нужен код, который отображает модальное окно, и тот же код также должен отображать в нем полную информацию о товаре.
Обычно, если у вас есть страница категории, в которой отображается сводка продуктов, вам нужно будет заполнить модальное окно (которое вызывает всплывающее окно) с полным описанием продукта, взятым через Ajax (веб-сайт должен иметь возможность выводить данные о продукте в JSON если вы получили URL-адрес, например, mystore.com/ajax/p/10101, где 10101 - это идентификатор продукта. Это зависит от создателя веб-сайта.
Anyways, пример JS-кода с модальным окном и который отображает информацию о продукте на странице вы находитесь на ниже.
$(".view").click(function(){
$(".overlay").show();
var pName = $(this).parent().children(".itemName").text();
var pPrice = $(this).parent().children(".itemPrice").text();
var pDescription = $(this).parent().children(".itemDescription").text();
$(".productName").text(pName);
$(".productPrice").text(pPrice);
$(".productDescription").text(pDescription);
});
$(".close").click(function(e){
e.preventDefault();
$(".overlay").hide();
});.content {
display: block;
width: 100%;
position: relative;
}
.products {
width: 100%;
float: left;
display: block;
position: relative;
}
.item {
position: relative;
width: 45%;
float: left;
display: block;
margin-right: 10px;
border: solid 1px #ccc;
padding: 4px;
height: 150px;
box-sizing: border-box;
}
.itemImage {
width: 50%;
float: left;
height: 138px;
border: solid 1px green;
margin-right: 10px;
}
.itemName {
font: 500 20px/25px Arial;
}
.itemPrice {
font-weight: bolder;
}
.itemDescription {
font: 300 16px/18px Arial;
}
.view {
font: 100 9px/10px Arial;
}
.view:hover {
cursor: pointer;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 300px;
background: rgba(0,0,0,0.4);
}
.popup {
display: block;
position: absolute;
top: 50px;
left: 200px;
width: 300px;
height: 150px;
background: #fff;
}
.close {
position: absolute;
top: 10px;
right: 10px;
}
.product {
position: absolute;
top: 30px;
left: 20px;
}
.productImage {
width: 100px;;
display: block;
float: left;
margin-right: 10px;
position: relative;
height: 100px;
border: solid 1px red;
}
.productName {
font: 500 15px/16px Arial;
float: left;
width: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="products">
<div class="item">
<div class="itemImage"><img src="" /></div>
<div class="itemName"> Product 1</div>
<div class="itemPrice"> $100 </div>
<div class="itemDescription"> Description 1 in here.</div>
<span class="view">View popup</span>
</div>
<div class="item">
<div class="itemImage"><img src="" /></div>
<div class="itemName"> Product 2</div>
<div class="itemPrice"> $300 </div>
<div class="itemDescription"> Description 2 in here.</div>
<span class="view">View popup</span>
</div>
</div>
<div class="overlay">
<div class="popup">
<a href="#" class="close">Close X</a>
<div class="product">
<div class="productImage"><img src="" /></div>
<div class="productName"> xxxxxx</div>
<div class="productPrice"> uuuuuuuu </div>
<div class="productDescription"> tttttttt </div>
</div>
</div>
</div>
</div>Спасибо! это помогло мне – Kirill
Да, вы абсолютно можете это сделать, и мы будем рады помочь вам с вашим кодом, когда вы застряли. Пожалуйста, разместите свой код, когда вы доберетесь так далеко, и застряли в определенной части кода. – SQLMason
@DanAndrews, спасибо за ответ, проблема в том, что я не знаю, с чего начать, должен искать какую-то структуру? – Kirill
У вас есть серьезная проблема, заслуживающая хорошего ответа. К сожалению, stackoverflow не подходит для таких вопросов. Выполнение большего количества исследований (таких как рамки) определенно поможет вам - вам нужно сделать это, мы не сможем сделать это за вас. – SQLMason