ランディングページのポップアップウィンドウ

Question

商品でランディングページを作成しました。 すべての商品には説明と価格があります。 開くをクリックすると、ポップアップウィンドウが開き、画像と説明が表示されます。 質問は、私はhtmlやいくつかのフレームワークのポップアップで商品をたくさん持っているなら、HTMLですべての説明をする必要があります。どういうわけか、ポップアップウィンドウのテンプレートを作って、ポップアップウィンドウJavaScriptを介して？

Answer 1

基本的には、モーダルウィンドウを表示するコードが必要です。同じコードには、完全な製品の詳細も表示する必要があります。

通常、製品概要を表示するカテゴリページがある場合、Ajax経由で取り込まれた完全な製品の詳細をモーダルウィンドウ（ポップアップを呼び出すポップアップウィンドウ）に入れる必要があります（WebサイトはJSONで製品データを出力できるはずです）もしあなたがmystore.com/ajax/p/10101のようなURLを持っていれば、10101が製品IDです。

とにかく、モーダルウィンドウを備えたサンプルコードで、製品情報を表示しますページから、あなたは上にある以下の通りです。

$(".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>