我是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">×</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 -->
答案 0 :(得分：0)
您可以为此目的使用jquery。你应该默认使用CSS隐藏模式 然后，当用户单击按钮时，您将使用onclick调用javascript函数并将产品ID传递给它。调用函数后，您将向服务器发送ajax请求并获取详细信息，并使用类和id选择器将返回的数据简单地设置为模式，最后一步，将模式显示给用户。
答案 1 :(得分：0)
尝试使用javascript代码
<script>
$(document).on('click', '.show-modal', function() {
$("#picture_show").prop("src", "{{ URL::asset('img/products/')}}/"+$(this).data('target'));
});
</script>