如何将值传递给模态形式 laravel 5.2
how to pass values to modal form laravel 5.2
我是 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_1.jpg"><img src="{{ Request::root() }}/website/img/accessories.jpg" alt="product-view"></a>
</div>
<div id="menu1" class="tab-pane fade">
<a data-fancybox="images" href="{{ Request::root() }}/website/img/best-seller_1.jpg"><img src="{{ Request::root() }}/website/img/accessories_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_2.jpg"><img src="{{ Request::root() }}/website/img/best-seller_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_2.jpg"><img src="{{ Request::root() }}/website/img/best-seller_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_2.jpg"> <img src="{{ Request::root() }}/website/img/best-seller_2.jpg" alt="product-view"></a>
</div>
<div id="menu5" class="tab-pane fade">
<a data-fancybox="images" href="{{ Request::root() }}/website/img/accessories_2.jpg"><img src="{{ Request::root() }}/website/img/accessories_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.jpg" alt="product-thumbnail"></a>
</div>
<div>
<a data-toggle="tab" href="#menu1"> <img src="{{ Request::root() }}/website/img/thumbnail.jpg" alt="product-thumbnail"></a>
</div>
<div>
<a data-toggle="tab" href="#menu2"> <img src="{{ Request::root() }}/website/img/thumbnail.jpg" alt="product-thumbnail"></a>
</div>
<div>
<a data-toggle="tab" href="#menu3"> <img src="{{ Request::root() }}/website/img/thumbnail.jpg" alt="product-thumbnail"></a>
</div>
<div>
<a data-toggle="tab" href="#menu4"> <img src="{{ Request::root() }}/website/img/thumbnail.jpg" alt="product-thumbnail"></a>
</div>
<div>
<a data-toggle="tab" href="#menu5"> <img src="{{ Request::root() }}/website/img/thumbnail.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>.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 -->
您可以使用 jquery 来达到这个目的。你应该使用 css 默认隐藏模式
然后当用户单击按钮时，您将使用 onclick 调用 javascript 函数并将产品 ID 传递给它。调用该函数后，您将向服务器发送一个 ajax 请求并获取详细信息，然后使用 class 和 id 选择器将返回的数据简单地设置到模态中，在最后一步中您将显示模态给用户。
在 javascript 代码中试试这个
<script>
$(document).on('click', '.show-modal', function() {
$("#picture_show").prop("src", "{{ URL::asset('img/products/')}}/"+$(this).data('target'));
});
</script>
我是 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_1.jpg"><img src="{{ Request::root() }}/website/img/accessories.jpg" alt="product-view"></a>
</div>
<div id="menu1" class="tab-pane fade">
<a data-fancybox="images" href="{{ Request::root() }}/website/img/best-seller_1.jpg"><img src="{{ Request::root() }}/website/img/accessories_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_2.jpg"><img src="{{ Request::root() }}/website/img/best-seller_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_2.jpg"><img src="{{ Request::root() }}/website/img/best-seller_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_2.jpg"> <img src="{{ Request::root() }}/website/img/best-seller_2.jpg" alt="product-view"></a>
</div>
<div id="menu5" class="tab-pane fade">
<a data-fancybox="images" href="{{ Request::root() }}/website/img/accessories_2.jpg"><img src="{{ Request::root() }}/website/img/accessories_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.jpg" alt="product-thumbnail"></a>
</div>
<div>
<a data-toggle="tab" href="#menu1"> <img src="{{ Request::root() }}/website/img/thumbnail.jpg" alt="product-thumbnail"></a>
</div>
<div>
<a data-toggle="tab" href="#menu2"> <img src="{{ Request::root() }}/website/img/thumbnail.jpg" alt="product-thumbnail"></a>
</div>
<div>
<a data-toggle="tab" href="#menu3"> <img src="{{ Request::root() }}/website/img/thumbnail.jpg" alt="product-thumbnail"></a>
</div>
<div>
<a data-toggle="tab" href="#menu4"> <img src="{{ Request::root() }}/website/img/thumbnail.jpg" alt="product-thumbnail"></a>
</div>
<div>
<a data-toggle="tab" href="#menu5"> <img src="{{ Request::root() }}/website/img/thumbnail.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>.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 -->
您可以使用 jquery 来达到这个目的。你应该使用 css 默认隐藏模式 然后当用户单击按钮时，您将使用 onclick 调用 javascript 函数并将产品 ID 传递给它。调用该函数后，您将向服务器发送一个 ajax 请求并获取详细信息，然后使用 class 和 id 选择器将返回的数据简单地设置到模态中，在最后一步中您将显示模态给用户。
在 javascript 代码中试试这个
<script>
$(document).on('click', '.show-modal', function() {
$("#picture_show").prop("src", "{{ URL::asset('img/products/')}}/"+$(this).data('target'));
});
</script>