Popup

Basic


 <body>

   ...

   // Link
   <a href="#basic" class="..."> Pop me up </a>

   ...  

   // Popup
   // - Just before <body> tag 
   <div id="basic" class="zb-popup">
     
     <div class="..."> Lorem ipsum dolor </div>
  
   </div>

 </body>
					 	

Backdrop [zb-backdrop]


   <div id="backdrop" class="zb-popup" zb-backdrop="false">
     
     // Optional
     <i class="close"> </i>
     
     <div class="..."> Lorem ipsum dolor </div>
  
     <div class="...">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
       Delectus expedita porro maxime modi in, earum, dolor aspernatur suscipit perspiciatis rem beatae voluptas repellendus, unde aliquid dolore. 
       Sapiente, sequi sed dolor.
     </div>
  
   </div>

					 	

Custom


   <div id="custom" class="popup pale" zb-backdrop="false">
     
     // Optional
     <i class="close black"> close </i>
     
     <div class="..."> Lorem ipsum dolor </div>
  
     <div class="...">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
       Delectus expedita porro maxime modi in, earum, dolor aspernatur suscipit perspiciatis rem beatae voluptas repellendus, unde aliquid dolore. 
       Sapiente, sequi sed dolor.
     </div>
  
   </div>

					 	

Size (.small, .medium, .big)


   <div id="size" class="popup small">
     
     // Optional
     <i class="close black"></i>
     
     <div class="..."> Lorem ipsum dolor </div>
  
     <div class="...">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
       Delectus expedita porro maxime modi in, earum, dolor aspernatur suscipit perspiciatis rem beatae voluptas repellendus, unde aliquid dolore. 
       Sapiente, sequi sed dolor.
     </div>
  
   </div>

					 	

Popup Class

To get access to one of your Slider instance just add an id to your slider and call it with the static method Popup.get(id).
Then you can controle your instance: .popItUp(), Popup.close().

   
   // Button (div.btn)
   <div id="pop-me-up" class="btn">Pop me up</div>
 
   // Popup
   <div id="class" class="zb-popup" zb-backdrop="false">
     
     <div class="..."> Lorem ipsum dolor </div>
  
     <div class="...">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
       Delectus expedita porro maxime modi in, earum, dolor aspernatur suscipit perspiciatis rem beatae voluptas repellendus, unde aliquid dolore. 
       Sapiente, sequi sed dolor.
     </div>

     <div id="close-popup" class="btn red">Close popup</div>
  
   </div>


   <script>

     // Get your instance by id  
     var  mypopup= Popup.get("class");
    
     // Then you can use a bunch of method 
     $('#pop-me-up').click( function(){
        mypopup.popItUp();
     });
     $('#close-popup').click( function(){
     	// Static methode  
        Popup.close();
     });

   </script>

					 	
Pop me up
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus expedita porro maxime modi in, earum, dolor aspernatur suscipit perspiciatis rem beatae voluptas repellendus, unde aliquid dolore. Sapiente, sequi sed dolor.
close
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus expedita porro maxime modi in, earum, dolor aspernatur suscipit perspiciatis rem beatae voluptas repellendus, unde aliquid dolore. Sapiente, sequi sed dolor.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus expedita porro maxime modi in, earum, dolor aspernatur suscipit perspiciatis rem beatae voluptas repellendus, unde aliquid dolore. Sapiente, sequi sed dolor.
Close popup
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus expedita porro maxime modi in, earum, dolor aspernatur suscipit perspiciatis rem beatae voluptas repellendus, unde aliquid dolore. Sapiente, sequi sed dolor.
yo
yoyoyo
yo
yoyoyo
yo
yoyoyo
yo
yoyoyo
Coming soon

Oops sorry!!!

This content is not available yet.