Modal FX

Modal effects for Bulma.io

Fork me on GitHub

A set of modal window effects with CSS transitions and animations for Bulma. Very inspired by this Codrops resource/article: https://github.com/codrops/ModalWindowEffects

GitHub repo: https://github.com/postare/bulma-modal-fx

Effects

normal fadeInScale slideRight slideLeft slideTop slideBottom fall slideFall newsPaper 3dFlipVertical 3dFlipHorizontal 3dSign 3dSignDown superScaled 3dSlit 3dRotateFromBottom 3dRotateFromLeft

Examples

Image modal Image modal "huge" Image modal "huge" (very high) Card "tiny" Modal Card "full-screen" 3dSign "top" 3dSignDown "bottom" Background Image

INSTALL

Use npm: npm i bulma-modal-fx

or simply download latest release: Download

Getting started

Include the plugin css file:

<link rel="stylesheet" href="dist/css/modal-fx.min.css" />

(optional) Include the plugin just before body closing tag:

<script type="text/javascript" src="dist/js/modal-fx.min.js"></script>

Or use a CDN:

<link rel="stylesheet" href="https://unpkg.com/bulma-modal-fx/dist/css/modal-fx.min.css" />
<script type="text/javascript" src="https://unpkg.com/bulma-modal-fx/dist/js/modal-fx.min.js"></script>

Html markup 

<!-- trigger button -->
<span class="button modal-button" data-target="modal-id">Open modal</span>

<!-- related modal with fx class "modal-fx-fadeInScale" -->
<div id="modal-id" class="modal modal-fx-fadeInScale">
    <div class="modal-background"></div>
    <div class="modal-content">
        <!-- Any other Bulma elements you want -->
    </div>
    <button class="modal-close is-large" aria-label="close"></button>
</div>

<!-- To activate the modal, just add the is-active modifier on the .modal container -->
<div id="modal-id" class="modal modal-fx-fadeInScale is-active"></div>[...]

Modifiers

Class modifiers .modal:

Class modifiers .modal-content:

Example:

// Tiny bottom positioned modal
<div id="modal-id" class="modal modal-fx-fadeInScale modal-pos-bottom">
    <div class="modal-background"></div>
    <div class="modal-content is-tiny">
        <!-- Any other Bulma elements you want -->
    </div>
    <button class="modal-close is-large" aria-label="close"></button>
</div>

Example full screen modal card:

<div id="modal-fadeInScale-fs" class="modal modal-full-screen modal-fx-fadeInScale">
    <div class="modal-content modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">Modal title</p>
            <button class="modal-button-close delete" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
        <!-- Modal card body -->
        </section>
        <footer class="modal-card-foot">
            <button class="modal-button-close button is-success">Save changes</button>
            <button class="modal-button-close button">Cancel</button>
        </footer>
    </div>
</div>

Sass variables 

// Modal minimal setup
$transition-duration: .3s;
$transition-duration-newsPaper: .7s;
$transition-duration-3dslit: .5s;

$modal-perspective: 1300px;
$modal-bg-color: rgba($black,.86);