Btukfyl

I am beginner in Laravel
I use Laravel 5.2

I have in welcome.blade.php a tag which leads to data-target="#myModal", this modal form I made it in another page and included it in 4 pages I need to make it preview product details related to this page and product.

For example, in the welcome page, when I click on a quick view of the product, it calls this popup form and gives it an id to query and fetch all product details.

            <!-- Quick View Content Start -->

    <div class="modal fade" id="myModal" role="dialog">

        <!-- Modal Dialog Box Start -->

        <div class="modal-dialog max-width">

            <!-- Modal content Start -->

            <div class="modal-content">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal">&times;</button>

                </div>

                <!-- Modal Body Start -->

                <div class="modal-body">

                    <div class="quiick-view-details">

                        <!-- Product Thumbnail Start -->

                        <div class="main-product-thumbnail">

                            <div class="row">

                                <!-- Main Thumbnail Image Start -->

                                <div class="col-sm-5">

                                    <!-- Thumbnail Large Image start -->

                                    <div class="tab-content">

                                        <div id="home" class="tab-pane fade in active">

                                            <a data-fancybox="images" href="{{ Request::root() }}/website/img/new-products3_1.jpg"><img src="{{ Request::root() }}/website/img/accessories8.jpg" alt="product-view"></a>

                                        </div>

                                        <div id="menu1" class="tab-pane fade">

                                            <a data-fancybox="images" href="{{ Request::root() }}/website/img/best-seller6_1.jpg"><img src="{{ Request::root() }}/website/img/accessories7_1.jpg" alt="product-view"></a>

                                        </div>

                                        <div id="menu2" class="tab-pane fade">

                                            <a data-fancybox="images" href="{{ Request::root() }}/website/img/best-seller6_2.jpg"><img src="{{ Request::root() }}/website/img/best-seller6_2.jpg" alt="product-view"></a>

                                        </div>

                                        <div id="menu3" class="tab-pane fade">

                                            <a data-fancybox="images" href="{{ Request::root() }}/website/img/best-seller4_2.jpg"><img src="{{ Request::root() }}/website/img/best-seller4_2.jpg" alt="product-view"></a>

                                        </div>

                                        <div id="menu4" class="tab-pane fade">

                                            <a data-fancybox="images" href="{{ Request::root() }}/website/img/best-seller9_2.jpg"> <img src="{{ Request::root() }}/website/img/best-seller9_2.jpg" alt="product-view"></a>

                                        </div>

                                        <div id="menu5" class="tab-pane fade">

                                            <a data-fancybox="images" href="{{ Request::root() }}/website/img/accessories7_2.jpg"><img src="{{ Request::root() }}/website/img/accessories7_2.jpg" alt="product-view"></a>

                                        </div>

                                    </div>

                                    <!-- Thumbnail Large Image End -->



                                    <!-- Thumbnail Image End -->

                                    <div class="product-thumbnail">

                                        <div class="thumb-menu owl-carousel">

                                            <div class="active">

                                                <a data-toggle="tab" href="#home"> <img src="{{ Request::root() }}/website/img/thumbnail1.jpg" alt="product-thumbnail"></a>

                                            </div>

                                            <div>

                                                <a data-toggle="tab" href="#menu1"> <img src="{{ Request::root() }}/website/img/thumbnail2.jpg" alt="product-thumbnail"></a>

                                            </div>

                                            <div>

                                                <a data-toggle="tab" href="#menu2"> <img src="{{ Request::root() }}/website/img/thumbnail3.jpg" alt="product-thumbnail"></a>

                                            </div>

                                            <div>

                                                <a data-toggle="tab" href="#menu3"> <img src="{{ Request::root() }}/website/img/thumbnail4.jpg" alt="product-thumbnail"></a>

                                            </div>

                                            <div>

                                                <a data-toggle="tab" href="#menu4"> <img src="{{ Request::root() }}/website/img/thumbnail5.jpg" alt="product-thumbnail"></a>

                                            </div>

                                            <div>

                                                <a data-toggle="tab" href="#menu5"> <img src="{{ Request::root() }}/website/img/thumbnail6.jpg" alt="product-thumbnail"></a>

                                            </div>

                                        </div>

                                    </div>

                                    <!-- Thumbnail image end -->

                                </div>

                                <!-- Main Thumbnail Image End -->

                                <!-- Thumbnail Description Start -->

                                <div class="col-sm-7">

                                    <div class="thubnail-desc fix">

                                        <h2 class="product-header">Fusion Backpack</h2>

                                        <div class="pro-ref">

                                            <p><label>المخزون :</label><span class="stock" title="abailability">متاح فى المخزن</span></p>

                                            <p><label class="text-uppercase">sku:</label><span>25-UG05</span></p>

                                        </div>

                                        <div class="rating-summary fix mtb-10">

                                            <div class="rating-feedback f-right">

                                                <a href="#">(1 تعليق)</a>

                                                <a href="#">أضف الى تعليقك</a>

                                            </div>

                                            <div class="rating f-right">

                                                <i class="zmdi zmdi-star"></i>

                                                <i class="zmdi zmdi-star"></i>

                                                <i class="zmdi zmdi-star"></i>

                                                <i class="zmdi zmdi-star-outline"></i>

                                                <i class="zmdi zmdi-star-outline"></i>

                                            </div>

                                        </div>

                                        <div class="pro-price mb-15">

                                            <span>$19.00</span>

                                        </div>

                                        <div class="box-quantity mb-30">

                                            <form action="#">

                                                <input class="number" id="number" type="number" value="1">

                                                <button class="action-prime">أضف الى السلة</button>

                                            </form>

                                        </div>

                                        <div class="product-social-link">

                                            <ul class="list-inline">

                                                <li><a href="#">أضف الى المفضلة</a></li>

                                                <li><a href="#">أضف الى المقارنة</a></li>

                                                <li><a href="#">ارسل بالبريد الالكترونى</a></li>

                                            </ul>

                                        </div>

                                        <p class="ptb-30">وصف المنتج.</p>

                                    </div>

                                </div>

                                <!-- Thumbnail Description End -->

                            </div>

                            <!-- Row End -->

                            <!-- Product Thumbnail Description Start -->

                            <div class="thumnail-desc">

                                <div class="row">

                                    <div class="col-sm-12">

                                        <ul class="main-thumb-desc pt-30">

                                            <li class="active"><a data-toggle="tab" href="#dtails">التفاصيل</a></li>

                                            <li><a data-toggle="tab" href="#reviews">التعليقات</a></li>

                                        </ul>

                                        <!-- Product Thumbnail Tab Content Start -->

                                        <div class="tab-content thumb-content">

                                            <div id="dtails" class="tab-pane fade in active">

                                                <p>مواصفات المنتج<br>

                                                    <ul>

                                                        <li>Durable nylon construction.</li>

                                                        <li>2 main zippered compartments.</li>

                                                        <li>1 exterior zippered pocket.</li>

                                                        <li>Mesh side pouches.</li>

                                                        <li>Padded, adjustable straps.</li>

                                                        <li>Top carry handle.</li>

                                                        <li>Dimensions: 18" x 10" x 6".</li>

                                                    </ul>

                                            </div>

                                            <div id="reviews" class="tab-pane fade">

                                                <!-- Reviews Start -->

                                                <div class="review pb-40">

                                                    <h3 class="review-title mb-35">تعليقات الزوار</h3>

                                                    <h4 class="review-mini-title">Plazathemes</h4>

                                                    <ul class="review-list">

                                                        <!-- Single Review List Start -->

                                                        <li>

                                                            <span>الجودة</span>

                                                            <i class="zmdi zmdi-star"></i>

                                                            <i class="zmdi zmdi-star"></i>

                                                            <i class="zmdi zmdi-star"></i>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                            <label>Plazathemes</label>

                                                        </li>

                                                        <!-- Single Review List End -->

                                                        <!-- Single Review List Start -->

                                                        <li>

                                                            <span>السعر</span>

                                                            <i class="zmdi zmdi-star"></i>

                                                            <i class="zmdi zmdi-star"></i>

                                                            <i class="zmdi zmdi-star"></i>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                            <label>Review by Plazathemes</label>

                                                        </li>

                                                        <!-- Single Review List End -->

                                                        <!-- Single Review List Start -->

                                                        <li>

                                                            <span>القيمة</span>

                                                            <i class="zmdi zmdi-star"></i>

                                                            <i class="zmdi zmdi-star"></i>

                                                            <i class="zmdi zmdi-star"></i>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                            <label>Posted on 7/20/16</label>

                                                        </li>

                                                        <!-- Single Review List End -->

                                                    </ul>

                                                </div>

                                                <!-- Reviews End -->

                                                <!-- Reviews Start -->

                                                <div class="review pt-50">

                                                    <h3 class="review-title mb-30">You're reviewing: <br><span>Go-Get'r Pushup Grips</span></h3>

                                                    <p class="mb-10 req">your rating</p>

                                                    <ul class="review-list">

                                                        <!-- Single Review List Start -->

                                                        <li>

                                                            <span>الجودة</span>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                        </li>

                                                        <!-- Single Review List End -->

                                                        <!-- Single Review List Start -->

                                                        <li>

                                                            <span>السعر</span>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                        </li>

                                                        <!-- Single Review List End -->

                                                        <!-- Single Review List Start -->

                                                        <li>

                                                            <span>القيمة</span>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                            <i class="zmdi zmdi-star-outline"></i>

                                                        </li>

                                                        <!-- Single Review List End -->

                                                    </ul>

                                                </div>

                                                <!-- Reviews End -->

                                                <!-- Reviews Field Start -->

                                                <div class="riview-field mt-30">

                                                    <form autocomplete="off" action="#">

                                                        <div class="form-group">

                                                            <label class="req" for="n-name">اسمك</label>

                                                            <input type="text" class="form-control" id="n-name" required="required">

                                                        </div>

                                                        <div class="form-group">

                                                            <label class="req" for="summary">عنوان التعليق</label>

                                                            <input type="text" class="form-control" id="summary" required="required">

                                                        </div>

                                                        <div class="form-group">

                                                            <label class="req" for="comment">التعليق</label>

                                                            <textarea class="form-control" rows="5" id="comment" required="required"></textarea>

                                                        </div>

                                                        <button type="submit" class="btn-default">أضف التعليق</button>

                                                    </form>

                                                </div>

                                                <!-- Reviews Field Start -->

                                            </div>

                                        </div>

                                        <!-- Product Thumbnail Tab Content End -->

                                    </div>

                                </div>

                                <!-- Row End -->

                            </div>

                            <!-- Product Thumbnail Description End -->

                        </div>

                        <!-- Product Thumbnail End -->

                    </div>

                    <!-- Quick View Details End -->

                </div>

                <!-- Modal Body End -->

            </div>

            <!-- Modal Content End -->

        </div>

        <!-- Modal Dialog Box End -->

    </div>

    <!-- Quick View Content End -->

Try this in javascript code

<script>



$(document).on('click', '.show-modal', function() {

    $("#picture_show").prop("src", "{{ URL::asset('img/products/')}}/"+$(this).data('target'));

});

</script>

you could use jquery for this purpose . u should hide the modal by default using css
and then when the user clicks the button u will call a javascript function using onclick and pass the product id to it . once the function is called , you will send an ajax request to server and get the details and simply set the returned data into the modal using class and id selectors and in the final step you will show the modal to the user .