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:
function | effect |
---|---|
show | Shows the popup by setting the css property visibility to visible |
hide | Hides the popup by setting the css property visibility to hidden |
Updated about 5 years ago