Popup

Smooth popups out of the box.

The UI Kit cotains a simple popup library to easily create simple but user friendly popups with any content.

Using Popups

Any HTML element on your website with the class clerk-popup will be displayd as a popup.

This can both be elements in Clerk.js Content templates or any element on your website.

By default all popups will be visible immedeatly - if you want to trigger a popup manuyally later simply add the class clerk-popup-hidden.

JavaScript Interface

You can manage any popup via Clerk.js JavaScript interface.

<div 
  id="my-popup"
  class="clerk-popup"
>
  Hello, world!
</div>

<script type="text/javascript">
  var my_popup = Clerk('ui', 'popup', '#my-popup');
  
  // show popup
  my_popup.show(); /* or */ Clerk('ui', 'popup', '#my-popup', 'show');
  
  // hide popup again
  my_popup.hide(); /* or */ Clerk('ui', 'popup', '#my-popup', 'hide');
</script>

The popup library takes a css selector as input and appends styling and a close button.
When a popup has been created to exposes the following operations:

functioneffect
showShows the popup by setting the css property visibility to visible
hideHides the popup by setting the css property visibility to hidden