SHARE
TWEET

Untitled

a guest Jun 18th, 2019 71 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="row isotope-grid">
  2.             <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item conductor">
  3.                 <!-- Block2 -->
  4.                 <div class="block2">
  5.                     <div class="block2-pic hov-img0" >
  6.                         <img src="images/cable-1.jpg" alt="IMG-PRODUCT">
  7.  
  8.                         <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">
  9.                             Ver Detalles
  10.                         </a>
  11.                     </div>
  12.  
  13.                     <div class="block2-txt flex-w flex-t p-t-14">
  14.                         <div class="block2-txt-child1 flex-col-l ">
  15.                             <a href="detalle-cable1.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6 js-show-modal1">
  16.                                 CONDUCTOR CABLEADO AAAC
  17.                             </a>
  18.  
  19.                             <span class="stext-105 cl3">
  20.  
  21.                             </span>
  22.                         </div>
  23.  
  24.  
  25.                     </div>
  26.                 </div>
  27.             </div>
  28.      
  29. su detalle se coloca luego del footer y es llamado el js-modal1:
  30.  
  31.  
  32. <div class="wrap-modal1 js-modal1 p-t-60 p-b-20">
  33.         <div class="overlay-modal1 js-hide-modal1"></div>
  34.  
  35.         <div class="container">
  36.                 <div class="bg0 p-t-60 p-b-30 p-lr-15-lg how-pos3-parent">
  37.                 <button class="how-pos3 hov3 trans-04 js-hide-modal1">
  38.                     <img src="images/icons/icon-close.png" alt="CLOSE">
  39.                 </button>
  40.                 <!-- d -->
  41.                 <div class="row">
  42.                 <!-- b -->
  43.                 <div class="col-md-6 col-lg-7 p-b-30">
  44.                 <div class="p-l-25 p-r-30 p-lr-0-lg">
  45.                 <div class="wrap-slick3 flex-sb flex-w">
  46.                         <div class="wrap-slick3-dots"></div>
  47.                         <div class="wrap-slick3-arrows flex-sb-m flex-w"></div>
  48.         <!-- a -->
  49.         <div class="slick3 gallery-lb">
  50.  
  51.                     <div class="item-slick3" data-thumb="images/cable-1.jpg">
  52.                     <div class="wrap-pic-w pos-relative">
  53.  
  54.                     <img src="images/cable-1.jpg" alt="IMG-PRODUCT">
  55.                     <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="images/cable-1.jpg">
  56.                         <i class="fa fa-expand"></i>
  57.                     </a>
  58.                     </div>
  59.                     </div>
  60.  
  61.                 <div class="item-slick3" data-thumb="images/cable-2.jpg">
  62.                     <div class="wrap-pic-w pos-relative">
  63.                     <img src="images/cable-2.jpg" alt="IMG-PRODUCT">
  64.                     <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="images/cable-2.jpg">
  65.                         <i class="fa fa-expand"></i>
  66.                     </a>
  67.                     </div>
  68.                 </div>
  69.  
  70.                 <div class="item-slick3" data-thumb="images/cable-3.jpg">
  71.                     <div class="wrap-pic-w pos-relative">
  72.                     <img src="images/cable-3.jpg" alt="IMG-PRODUCT">
  73.                     <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="images/cable-3.jpg">
  74.                         <i class="fa fa-expand"></i>
  75.                     </a>
  76.                     </div>
  77.                 </div>
  78.  
  79.         </div>
  80.         <!-- a -->
  81.                 </div>
  82.                 </div>
  83.                 </div>
  84.                 <!-- b -->
  85.  
  86.                 <!-- c -->  
  87.                 <div class="col-md-6 col-lg-5 p-b-30">
  88.                 <div class="p-r-50 p-t-5 p-lr-0-lg">
  89.                     <h4 class="mtext-105 cl2 js-name-detail p-b-14">
  90.                             CONDUCTOR CABLEADO AAAC
  91.                     </h4>
  92.  
  93.                     <span class="mtext-106 cl2">
  94.                             ZTT, SKAITEKS, CENTELSA
  95.                     </span>
  96.  
  97.                     <p class="stext-102 cl3 p-t-23">
  98.                             Conductor cable desnudo aleación de aluminio de 25 a 120 mm2. De 7, 19 y 37 hilos con grasa o sin grasa.
  99.                     </p>
  100.                 </div>
  101.                 </div>
  102.                 <!-- c -->
  103.                 </div>
  104.                 <!-- d -->
  105.                 </div>
  106.         </div>
  107. </div>
  108.      
  109. el css que controla el modal es main.js:
  110.  
  111.  
  112.  
  113.      [ Show modal1 ]*/
  114.     $('.js-show-modal1').on('click',function(e){
  115.         e.preventDefault();
  116.         $('.js-modal1').addClass('show-modal1');
  117.     });
  118.  
  119.     $('.js-hide-modal1').on('click',function(){
  120.         $('.js-modal1').removeClass('show-modal1');
  121.     });
  122.      
  123. y en main css:
  124.  
  125.     /*//////////////////////////////////////////////////////////////////
  126. [ Modal1 ]*/
  127. .wrap-modal1 {
  128.   position: fixed;
  129.   width: 100%;
  130.   height: 100vh;
  131.   top: 0;
  132.   left: 0;
  133.   z-index: 9000;
  134.   overflow: auto;
  135.  
  136.   -webkit-transition: all 0.4s;
  137.   -o-transition: all 0.4s;
  138.   -moz-transition: all 0.4s;
  139.   transition: all 0.4s;
  140.  
  141.   visibility: hidden;
  142.   opacity: 0;
  143. }
  144.  
  145. .overlay-modal1 {
  146.   position: fixed;
  147.   z-index: -1;
  148.   width: 100%;
  149.   height: 100%;
  150.   top: 0;
  151.   left: 0;
  152.   background: #000;
  153.   opacity: 0.8;
  154. }
  155.  
  156. .show-modal1 {
  157.   visibility: visible;
  158.   opacity: 1;
  159. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top