How to show data in modal of a specific id in laravel? - php

Question

I have all my products in view:welcome.blade.php and The problem is how can I show modal with the details of a specific id?
<!-- End Product MEnu -->
<div class="row product__list">
#foreach($products as $product)
<!-- Start Single Product -->
<div class="col-md-3 single__pro col-lg-3 col-md-4 cat--1 col-sm-12">
<div class="product foo">
<div class="product__inner">
<div class="pro__thumb">
<a href="#">
<img src="{{ asset('storage/products/' . $product->image ) }}" width="270px" height="270px" alt="product images">
</a>
</div>
<div class="product__hover__info">
<ul class="product__action">
<li><a id="{{ $product->id }}" data-toggle="modal" data-target="#productModal" title="Quick View" class="quick-view modal-view detail-link viewDetails" href="#"><span class="ti-plus"></span></a></li>
<li><a title="Add TO Cart" href="cart.html"><span class="ti-shopping-cart"></span></a></li>
</ul>
</div>
<div class="add__to__wishlist">
<a data-toggle="tooltip" title="Add To Wishlist" class="add-to-cart" href="wishlist.html"><span class="ti-heart"></span></a>
</div>
</div>
<div class="product__details">
<h2>{{ $product->name }}</h2>
<ul class="product__price">
{{-- <li class="old__price">$16.00</li> --}}
<li class="new__price">₹ {{ $product->price }}</li>
</ul>
</div>
</div>
</div>
<!-- End Single Product -->
#endforeach
How can i show the details of a product in a modal?

Answer 1

Please Change Your data-target="#productModal{{ $product->id }}"
<div class="product__hover__info">
<ul class="product__action">
<li><span class="ti-plus"></span></li>
<li><a title="Add TO Cart" href="cart.html"><span class="ti-shopping-cart"></span></a></li>
</ul>
</div>
<div class="modal fade" id="productModal{{ $product->id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
{{$product->id}}
</div>
</div>
</div>
</div>