登陆页面上的弹出窗口

Question

我制作了一个带商品的登陆页面。 每件商品都有描述和价格。 当您单击打开＆＃34;弹出窗口＆＃34;应该打开，图片和说明。 问题是，如果我有很多商品如此使用html和一些框架弹出窗口，我将需要在html中进行所有描述，我可以以某种方式制作弹出窗口的模板，并通过弹出窗口提供商品描述javascript？

Answer 1

基本上，您需要一个显示模态窗口的代码，同样的代码也应该显示其中的完整产品详细信息。

通常，如果您有一个显示产品摘要的类别页面，您需要填充模式窗口（有些调用弹出窗口），并通过Ajax获取完整的产品详细信息（该网站应该能够以JSON格式输出产品数据如果你有一个像mystore.com/ajax/p/10101这样的URL，其中10101是产品ID。这取决于网站创建者。

无论如何，带有模态窗口的示例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>