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 –

Was this article helpful to you? Yes No

How can we help?