سلام بخش مشاهده سریع رو میشه ی راهنمایی بفرمایین چجوری حلش کرد ؟؟
سلام و عرض ادب، من با جی کوئری هندلش کردم.
بخش html:
<div class="row isotope-grid"> @foreach($products as $product) <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item category{{ $product->category_id }}"> <div class="block2"> <div class="block2-pic hov-img0"> <img src="/{{ $product->demo_url }}" alt="IMG-PRODUCT"> <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1" data-id="{{ $product->id }}" data-demo-url="{{ $product->demo_url }}" data-title="{{ $product->title }}" data-description="{{ $product->description }}" data-price="{{ $product->price }}" > مشاهده سریع a> div> <div class="block2-txt flex-w flex-t p-t-14"> <div class="block2-txt-child1 flex-col-l "> <a href="{{ route('home.products.show',$product->id) }}" class="mtext-106 cl4 hov-cl1 trans-04 js-name-b2 p-b-6" target="_blank"> {{ $product->title }} a> <span class="stext-105 cl3"> {{ $product->price }} هزار تومان span> div> div> div> div> @endforeach div>
بخش modal:
<div class="wrap-modal1 js-modal1 p-t-60 p-b-20"> <div class="overlay-modal1 js-hide-modal1">div> <div class="container"> <div class="bg0 p-t-60 p-b-30 p-lr-15-lg how-pos3-parent"> <button class="how-pos3 hov3 trans-04 js-hide-modal1"> <img src="/images/icons/icon-close.png" alt="CLOSE"> button> <div class="row"> <div class="col-md-6 col-lg-7 p-b-30"> <div class="p-l-25 p-r-30 p-lr-0-lg"> <div class="wrap-slick3 flex-sb flex-w"> <div class="wrap-slick3-dots">div> <div class="wrap-slick3-arrows flex-sb-m flex-w">div> <div class="slick3 gallery-lb"> <div class="item-slick3 modal-small-image" data-thumb="#"> <div class="wrap-pic-w pos-relative"> <img src="#" alt="IMG-PRODUCT" class="modal-demo-url"> <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04 modal-image-expand" href="#" class="modal-demo-url"> <i class="fa fa-expand">i> a> div> div> div> div> div> div> <div class="col-md-6 col-lg-5 p-b-30"> <div class="p-l-50 p-t-5 p-lr-0-lg"> <h4 class="mtext-105 cl2 js-name-detail p-b-14" id="modal-title">h4> <span class="mtext-106 cl2" id="modal-price">span> <p class="stext-102 cl3 p-t-23" id="modal-description">p> <div class="p-t-33"> <div class="flex-w flex-r-m p-b-10"> <div class="flex-w flex-m respon6-next"> <a class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 js-addcart-detail" href="#" id="modal-add-to-basket"> افزودن به سبد خرید a> div> div> div> div> div> div> div> div> div>
بخش اسکریپت جی کوئری:
<script type="text/javascript"> /*================================================================== [ Show modal1 ]*/ $(document).ready(function () { $('.js-show-modal1').on('click', function (e) { e.preventDefault(); // get product data from selected product let productId = $(this).data('id'); let productTitle = $(this).data('title'); let productDescription = $(this).data('description'); let productPrice = $(this).data('price'); let productDemoUrl = $(this).data('demo-url'); // set gotten data to modal $('#modal-title').html(productTitle); $('#modal-price').html(productPrice + ' تومان'); $('#modal-description').html(productDescription); $('.modal-demo-url').attr("src", productDemoUrl); $('.modal-side-image').attr("src", productDemoUrl); $('.modal-image-expand').attr("href", productDemoUrl); if(!productPrice){ $('#modal-add-to-basket').attr("href", "user/products/source-url/download/" + productId); $('#modal-add-to-basket').html("دانلود فایل اصلی"); }else{ $('#modal-add-to-basket').attr("href", "{{ route('home.products.all') }}/" + productId + "/addToBasket"); $('#modal-add-to-basket').html("افزودن به سبد خرید"); } // show modal $('.js-modal1').addClass('show-modal1'); }); $('.js-hide-modal1').on('click', function () { $('.js-modal1').removeClass('show-modal1'); }); }); script>
جی کوئری مشکل ندارع!