對不起我的英語不好…如何顯示圖像您好，我希望當有人單擊縮放圖標時，它會在網站中打開一個小窗口，我將在這個小窗口中描述一個產品。HTML 代碼如何構建此圖像，<div class="container-fluid"> <div class="row"> <div class="col"> <div class="product-grid"> <div class="product-image"> <a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php"> <img alt="" class="bild" src="photo/111.jpg"> </a> </div> <div class="product-content"> <a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php"> <p class="title">Mochila doble tirantes Violeta</p> </a> </div> <div class="price">$16.00</div> <div class="div-zoom"> <span class="zum-warenkorb">zum warenkorb hinzufügen</span> <i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color: #595959; padding: 3%;"></i> </div> </div> </div></div>添加到購物籃的 CSS 代碼（zum warenkorb hinzufügen 德語..）并點擊縮放圖標/* div-zoom-fenster */.div-zoom { padding: 2%; padding-top: 15%; text-align: left;}/* zum-warenkorb */.zum-warenkorb { font-size: 89%; background-color: #bfbfbf; color: #ffffff; padding: 2%; margin-top: 2%; text-align: left;}.div-zoom i {padding-bottom: 5%; margin-left: 4%; } 這里有人說可以用JQuery，但我不知道關于JQuery..請有人幫助我，謝謝！
1 回答
慕桂英3389331
TA貢獻2036條經驗 獲得超8個贊
好的，這就是您需要做的。雖然我已經為您創建了一個示例，但請閱讀以下步驟：
您需要調用 jQuery CDN 和 Bootstrap JS CDN，
您需要創建 getbootstrap.com 上的 bootstrap 官方文檔中給出的模式
按照那里給出的方式使用 MOdal，只需在縮放按鈕上調用 ts 觸發器，就像我為您所做的那樣，繼續并單擊縮放按鈕。
將您的模態內容放入模態主體中，無論您想要什么，圖像、div、文本。
/* div-zoom-fenster */
.div-zoom { padding: 2%; padding-top: 15%; text-align: left;}
/* zum-warenkorb */
.zum-warenkorb { font-size: 89%; background-color: #bfbfbf; color: #ffffff; padding: 2%; margin-top: 2%; text-align: left;}
.div-zoom i {padding-bottom: 5%; margin-left: 4%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="product-grid">
<div class="product-image">
<a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
<img alt="" class="bild" src="photo/111.jpg">
</a>
</div>
<div class="product-content">
<a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
<p class="title">Mochila doble tirantes Violeta</p>
</a>
</div>
<div class="price">$16.00</div>
<div class="div-zoom">
<span class="zum-warenkorb">zum warenkorb hinzufügen</span>
<i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color: #595959; padding: 3%;" data-toggle="modal" data-target="#zoomWindow"></i>
</div>
</div>
</div>
</div>
<div class="modal fade" id="zoomWindow" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close text-right" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-body">
put here, whaterver you want
</div>
</div>
</div>
</div>
- 1 回答
- 0 關注
- 133 瀏覽
添加回答
舉報
0/150
提交
取消