着陸頁上的彈出式窗口

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>