Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement