Simple but flexible popup library with no dependencies
CSS
<link rel="stylesheet" href="/lifter/dist/lifter.min.css" />
JavaScript
<script src="/lifter/dist/lifter.min.js"></script>
Basic
<a href="//domain.com/page.html" target="_popup">Pop this up</a>
var lifter = new Lifter();
Inline Content
<div id="popup-content" style="display:none;">
<form action="/submit" method="POST">
<input type="email" name="email" placeholder="Email address" /><br />
<input type="password" name="password" placeholder="Password" /><br />
<button type="submit">Log In</button>
</form>
</div>
<a target="_popup" data-content="#popup-content">Log In</a>
var lifter = new Lifter({
preload : ':not([data-content])'
});
var lifter = new Lifter({
triggers : '.popup',
preload : true
});
Option | Type | Default | Description |
---|---|---|---|
triggers | string | '[target=_popup]' |
Selector for the triggers that open popups. |
preload | boolean or string | true |
Whether to load the popup content in hidden <iframes> . If a string selector is given then only triggers that match the selector will be preloaded. |
The default size of the popup is 50% of the total width and height of the base element. This can be changed per popup in a two different ways.
Setting popup size with classes
To use a small or large variant of the popup you can add a class to the trigger.
Size | Class | Effect |
---|---|---|
small | lifter-sm |
width and height set to 30% |
large | lifter-lg |
width and height set to 80% |
<a href="//domain.com/page.html" target="_popup" class="lifter-lg">Pop this up huge</a>
Setting popup size with data attributes
To have more control over the size of your popup you can use one of these data attributes:
data-width
data-height
data-size
You can use any CSS size unit (px
, %
, em
, vw
...) in the value of the attribute.
Dimension | Attribute | Value Format | Example |
---|---|---|---|
width | data-width |
{width}{unit} |
data-width="500px" |
height | data-height |
{height}{unit} |
data-height="40vh" |
width and height | data-size |
`{width}{unit} | {height}{unit}` |
Note: data-size
will overwrite data-width
or data-height
if both are set on a trigger element.
Under normal use you should not need these methods but here they are just in case you are doing something fancy:
Opens a popup.
lift(options)
Parameter | Required | Type | Description |
---|---|---|---|
options |
yes | object |
Object containing configuration options for the popup. |
options.target |
no | string |
Selector that points to a popup that has been preloaded. |
options.html |
no | string |
Markup that will be shown in the popup if using inline content. |
options.src |
no | string |
URL to load in the popup. |
options.classes |
no | array |
List of classes that will be added to the popup |
option.styles |
no | object |
Key/values that represent styles and their values to be applied to the popup. Styles can be written as standard CSS styles (with hyphens) or as camel case. |
return |
- | element or boolean |
If target , html and src are all null then false will be returned and no popup will be shown, otherwise, the popup element will be returned |
Example
var lifter = new Lifter();
lifter.lift({
src : '//domain.com/page.html',
classes : [ 'lifter-sm', 'another-class'],
styles : { max-width : 100%; max-height: 100%; }
});
lower()
Closes the open popup.
Here are the selectors to use in your CSS if you want to customize the look of popups and the overlay behind it:
Selector | State |
---|---|
.lifter-base::after |
- |
.lifter-base.lifting::after |
popup active |
Example
.lifter-base::after {
background-color: #fff;
}
Selector | State |
---|---|
.lifter |
- |
.lifter.lifting |
popup active |
Example
.lifter {
border-radius: 10000px;
}
.lifter.lifted {
border-radius: 0;
}
Note: .lifter
transitions all applicable differences in styling between the .lifter
and lifter.lifted
selectors by default but this can be overridden if desired through CSS. ( transition: opacity 150ms ease;
)
- make an example page/site
- write tests
- add more pre-set animation styles
- make docs prettier