Product Modal Popup

Product Details are showed in modal in aviato.

1. Basic structure to call modal in our template

<div class="preview-meta">
 <span data-toggle="modal" data-target="#product-modal">
 <i class="tf-ion-ios-search-strong"></i>

href="#product-modal" call modal with the id. data-toggle="modal" is for open the modal.

2. Modal Structure

<!– Modal –>
<div class="modal product-modal fade" id="product-modal">
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <i class="tf-ion-close"></i>
 <div class="modal-dialog " role="document">
 <div class="modal-content">
 <div class="modal-body">
 <div class="row">
 <div class="col-md-8 col-sm-6 col-xs-12">
 <div class="modal-image">
 <img class="img-responsive" src="images/shop/products/modal-product.jpg" alt="product-img" />
 <div class="col-md-4 col-sm-6 col-xs-12">
 <div class="product-short-details">
 <h2 class="product-title">GM Pendant, Basalt Grey</h2>
 <p class="product-price">$200</p>
 <p class="product-short-description">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem iusto nihil cum. Illo laborum numquam rem aut officia dicta cumque.  
 <a href="cart.html" class="btn btn-main">Add To Cart</a>
 <a href="product-single.html" class="btn btn-transparent">View Product Details</a>
</div><!– /.modal –>

Put your contents in modal-body.

Eager to know about bootstrap modal, Check this link –

Improve this page on Github  — Last updated:  Tue, Dec 15, 2020