https://github.com/hyperhype/hyperlightbox
A lightbox built with hyperscript
https://github.com/hyperhype/hyperlightbox
hyperscript
Last synced: 6 months ago
JSON representation
A lightbox built with hyperscript
- Host: GitHub
- URL: https://github.com/hyperhype/hyperlightbox
- Owner: hyperhype
- License: mit
- Created: 2016-06-22T23:55:18.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-12-28T16:11:19.000Z (about 9 years ago)
- Last Synced: 2025-06-25T09:55:09.569Z (7 months ago)
- Topics: hyperscript
- Language: JavaScript
- Homepage:
- Size: 5.86 KB
- Stars: 7
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hyperlightbox
a lightbox with hyperscript.
just a box that can appear over the other content.
``` js
var lightbox = require('hyperlightbox')
var lb = lightbox()
//make sure it's in the DOM.
document.body.appendChild(lb)
//pass it an element to show.
lb.show(h('h1', 'hello world'))
//later, close it. this will remove the element shown, also.
lb.close()
```
## css
you'll need to apply css to make in appear over the other content.
there are two ways I've found that work well.
### full screen lightbox
with the full screen approach, we can attach the lightbox to the DOM
anywhere.
``` css
.lightbox {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
```
### inline
to make the lightbox not take up the full screen, but only to go over some local context,
we can put it inside a position: relative div.
``` js
h('div.content',
h('div.relative', lb), //add light box in with content.
h('h1', 'blah blah blah...')
)
```
and then apply position relative to the container.
``` css
.relative {
position: relative;
height: 0px;
}
```
by also setting height to zero, the lightbox will show over the other content.
(the height sets the size of the container div, which the lightbox itself overflows)
## License
MIT