Popup

Start

  • Default
  • .fade
  • [zb-blur]

  
  <body>
     ...

     
      Pop up 

     ...

     
     
Lorem ipsum dolor
</body>

  
  <body>
     ...

     
      Pop up 

     ...

     
     
Lorem ipsum dolor
</body>

  
  <body>
     ...

     
      Pop up 

     ...

     
     
Lorem ipsum dolor
</body>

Size ( :sm, :md, :lg )

  • Default
  • :sm
  • :md
  • :lg

   
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.

:root {
  --zb-popup-w: 600px;
}

   
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.

:root {
  --zb-popup-sm: 475px;
}

   
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.

:root {
  --zb-popup-md: 800px;
}

   
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.

:root {
  --zb-popup-lg: 1050px;
}

Backdrop ( [zb-backdrop], .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.

Popup Class

To get access to one of your Popup instance use the static method Popup.get(id).
Then you can controle your instance with the following methods: .open(), .close().

  • HTML
  • JS

   
   
Pop up
Lorem ipsum dolor
Lorem ipsum dolor sit amet, ...
Close popup

   // Get your instance by id
   var  mypopup= Popup.get("pop-up");

   $('#btn-pop-up').click( function(){
      mypopup.open();
   });

   $('#close-popup').click( function(){
      // Static methode
      Popup.close();
   });
Pop up
Coming soon

Oops sorry!!!

This content is not available yet.

Lorem ipsum dolor
Lorem ipsum dolor
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