A set of modal window effects with CSS transitions and animations for Bulma.
npm install bulma-modal-fxmodal-fx- + effect
modal-fx-newsPaper
npm i bulma-modal-fx
html
`
(optional) Include the plugin just before body closing tag:
`html
`
Or use a CDN
`html
`
`html
`
$3
`html
[...]
`
Bulma documentation on modal
$3
Class modifiers for .modal:
- .modal-pos-top: modal positioned on top
- .modal-pos-bottom: modal positioned on bottom
Class modifiers for .modal-content:
- .is-huge: 100% width modal
- .is-tiny: 400px width modal
- .is-image: if the content is an image
$3
`scss
// Modal minimal setup
$transition-duration: .3s;
$transition-duration-newsPaper: .7s;
$transition-duration-3dslit: .5s;
$modal-perspective: 1300px;
$modal-bg-color: rgba($black,.86);
``