着陆页上的弹出式窗口

Question

我制作了一个包含商品的着陆页。 每个商品都有描述和价格。 当你点击打开一个“弹出窗口”应该打开，与图片和说明。 问题是，如果我有很多商品，所以使用html和一些框架弹出窗口，我将需要在HTML中做所有的描述，我可以以某种方式创建弹出窗口的模板，并在弹出窗口中提供商品的描述通过javascript？

Answer 1

基本上你需要一个显示模态窗口的代码，同样的代码也应该显示完整的产品细节。

通常情况下，如果您有一个显示产品摘要的类别页面，您需要填充通过Ajax获取的完整产品详细信息的模式窗口（该窗口称为弹出窗口）（网站应该能够以JSON输出产品数据格式，如果你有一个URL像mystore.com/ajax/p/10101其中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>