<div class="row isotope-grid">
            <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item conductor">
                <!-- Block2 -->
                <div class="block2">
                    <div class="block2-pic hov-img0" >
                        <img src="images/cable-1.jpg" 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">
                            Ver Detalles
                        </a>
                    </div>

                    <div class="block2-txt flex-w flex-t p-t-14">
                        <div class="block2-txt-child1 flex-col-l ">
                            <a href="detalle-cable1.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6 js-show-modal1">
                                CONDUCTOR CABLEADO AAAC
                            </a>

                            <span class="stext-105 cl3">

                            </span>
                        </div>


                    </div>
                </div>
            </div>

su detalle se coloca luego del footer y es llamado el js-modal1:


<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>
                <!-- d -->
                <div class="row">
                <!-- b -->
                <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>
        <!-- a -->
        <div class="slick3 gallery-lb">

                    <div class="item-slick3" data-thumb="images/cable-1.jpg">
                    <div class="wrap-pic-w pos-relative">

                    <img src="images/cable-1.jpg" alt="IMG-PRODUCT">
                    <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="images/cable-1.jpg">
                        <i class="fa fa-expand"></i>
                    </a>
                    </div>
                    </div>

                <div class="item-slick3" data-thumb="images/cable-2.jpg">
                    <div class="wrap-pic-w pos-relative">
                    <img src="images/cable-2.jpg" alt="IMG-PRODUCT">
                    <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="images/cable-2.jpg">
                        <i class="fa fa-expand"></i>
                    </a>
                    </div>
                </div>

                <div class="item-slick3" data-thumb="images/cable-3.jpg">
                    <div class="wrap-pic-w pos-relative">
                    <img src="images/cable-3.jpg" alt="IMG-PRODUCT">
                    <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="images/cable-3.jpg">
                        <i class="fa fa-expand"></i>
                    </a>
                    </div>
                </div>

        </div>
        <!-- a -->
                </div>
                </div>
                </div>
                <!-- b -->

                <!-- c -->
                <div class="col-md-6 col-lg-5 p-b-30">
                <div class="p-r-50 p-t-5 p-lr-0-lg">
                    <h4 class="mtext-105 cl2 js-name-detail p-b-14">
                            CONDUCTOR CABLEADO AAAC
                    </h4>

                    <span class="mtext-106 cl2">
                            ZTT, SKAITEKS, CENTELSA
                    </span>

                    <p class="stext-102 cl3 p-t-23">
                            Conductor cable desnudo aleación de aluminio de 25 a 120 mm2. De 7, 19 y 37 hilos con grasa o sin grasa.
                    </p>
                </div>
                </div>
                <!-- c -->
                </div>
                <!-- d -->
                </div>
        </div>
</div>

el css que controla el modal es main.js:



     [ Show modal1 ]*/
    $('.js-show-modal1').on('click',function(e){
        e.preventDefault();
        $('.js-modal1').addClass('show-modal1');
    });

    $('.js-hide-modal1').on('click',function(){
        $('.js-modal1').removeClass('show-modal1');
    });

y en main css:

    /*//////////////////////////////////////////////////////////////////
[ Modal1 ]*/
.wrap-modal1 {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 9000;
  overflow: auto;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;

  visibility: hidden;
  opacity: 0;
}

.overlay-modal1 {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.8;
}

.show-modal1 {
  visibility: visible;
  opacity: 1;
}