Product Modal Popup

Product Details are showed in modal in aviato.

1. Basic structure to call modal in our template

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

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>
	</button>
  	<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>
	        		</div>
	        		<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.
	        				</p>
	        				<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>
	        		</div>
	        	</div>
	        </div>
    	</div>
  	</div>
</div><!-- /.modal -->

Put your contents in modal-body.

Eager to know about bootstrap modal, Check this link – https://getbootstrap.com/docs/3.3/javascript/#modals

Was this article helpful to you? Yes No

How can we help?