如何将值传递给模态形式laravel 5.2

Question

我是 Laravel 的初学者 我使用 Laravel 5.2

我在welcome.blade.php 中有一个指向data-target="#myModal" 的标签，这个模态表单我在另一个页面中制作并包含在4 个页面中，我需要让它预览与此页面和产品相关的产品详细信息。

例如，在欢迎页面中，当我单击产品的快速查看时，它会调用此弹出表单并为其提供id 以查询和获取所有产品详细信息。

            <!-- 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-products\3_1.jpg"><img src="{{ Request::root() }}/website/img/accessories\8.jpg" alt="product-view"></a>
                                        </div>
                                        <div id="menu1" class="tab-pane fade">
                                            <a data-fancybox="images" href="{{ Request::root() }}/website/img/best-seller\6_1.jpg"><img src="{{ Request::root() }}/website/img/accessories\7_1.jpg" alt="product-view"></a>
                                        </div>
                                        <div id="menu2" class="tab-pane fade">
                                            <a data-fancybox="images" href="{{ Request::root() }}/website/img/best-seller\6_2.jpg"><img src="{{ Request::root() }}/website/img/best-seller\6_2.jpg" alt="product-view"></a>
                                        </div>
                                        <div id="menu3" class="tab-pane fade">
                                            <a data-fancybox="images" href="{{ Request::root() }}/website/img/best-seller\4_2.jpg"><img src="{{ Request::root() }}/website/img/best-seller\4_2.jpg" alt="product-view"></a>
                                        </div>
                                        <div id="menu4" class="tab-pane fade">
                                            <a data-fancybox="images" href="{{ Request::root() }}/website/img/best-seller\9_2.jpg"> <img src="{{ Request::root() }}/website/img/best-seller\9_2.jpg" alt="product-view"></a>
                                        </div>
                                        <div id="menu5" class="tab-pane fade">
                                            <a data-fancybox="images" href="{{ Request::root() }}/website/img/accessories\7_2.jpg"><img src="{{ Request::root() }}/website/img/accessories\7_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/thumbnail\1.jpg" alt="product-thumbnail"></a>
                                            </div>
                                            <div>
                                                <a data-toggle="tab" href="#menu1"> <img src="{{ Request::root() }}/website/img/thumbnail\2.jpg" alt="product-thumbnail"></a>
                                            </div>
                                            <div>
                                                <a data-toggle="tab" href="#menu2"> <img src="{{ Request::root() }}/website/img/thumbnail\3.jpg" alt="product-thumbnail"></a>
                                            </div>
                                            <div>
                                                <a data-toggle="tab" href="#menu3"> <img src="{{ Request::root() }}/website/img/thumbnail\4.jpg" alt="product-thumbnail"></a>
                                            </div>
                                            <div>
                                                <a data-toggle="tab" href="#menu4"> <img src="{{ Request::root() }}/website/img/thumbnail\5.jpg" alt="product-thumbnail"></a>
                                            </div>
                                            <div>
                                                <a data-toggle="tab" href="#menu5"> <img src="{{ Request::root() }}/website/img/thumbnail\6.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 -->

Answer 1

在 javascript 代码中试试这个

<script>

$(document).on('click', '.show-modal', function() {
    $("#picture_show").prop("src", "{{ URL::asset('img/products/')}}/"+$(this).data('target'));
});
</script>

Answer 2

您可以为此目的使用 jquery。你应该默认使用css隐藏模式 然后当用户单击按钮时，您将使用 onclick 调用 javascript 函数并将产品 ID 传递给它。一旦调用该函数，您将向服务器发送一个 ajax 请求并获取详细信息，然后使用类和 id 选择器将返回的数据简单地设置为模态，在最后一步中，您将向用户显示模态。