登陆页面上的弹出窗口

Question

我用商品做了一个登陆页面。 每个商品都有描述和价格。 当您单击打开一个“弹出窗口”时，应该会打开带有图片和说明的窗口。 问题是，如果我有很多商品，所以使用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>