postare / bulma-modal-fx

A set of modal window effects with CSS transitions and animations for Bulma.

Bulma Modal FX

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

Demo: https://postare.github.io/bulma-modal-fx Bulma docs: https://bulma.io/documentation

Effects

class modal-fx- + effect example: modal-fx-newsPaper

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

Examples

https://postare.github.io/bulma-modal-fx/

INSTALL

npm i bulma-modal-fx

or simply download latest release: https://github.com/postare/bulma-modal-fx/releases/

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>[...]

Bulma documentation on modal

MODIFIERS

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

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);

bulma-modal-fx's Issues

Text link

Thanks for your work.
Would be great to also supply a text link trigger the modal.
Buttons are not always the best solution..

Not working anymore on newer Bulma versions

The modal effects other than "normal" will no longer working on newer versions of Bulma. This has to do with the new naming of modal classes.

To reproduce this, simply throw in the modal-fx class:

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

Solution, change from here(original):

.modal.modal-fx-slideBottom .modal-content {
        -webkit-transform: translateY(20%);
        -o-transform: translateY(20%);
        transform: translateY(20%);
        opacity: 0;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s
    }

    .modal.modal-fx-slideBottom.is-active .modal-content {
        -webkit-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

...to this...

.modal.modal-fx-slideBottom .modal-card {
        -webkit-transform: translateY(20%);
        -o-transform: translateY(20%);
        transform: translateY(20%);
        opacity: 0;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s
    }

    .modal.modal-fx-slideBottom.is-active .modal-card {
        -webkit-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

Bulma has changed the name of modal-content to modal-card. Hence, updating the target class name modal-content to modal-card makes it work again!

full screen modal

could this be done?
if yes, that would be most welcome addition.

Instant close with input

When input is changed the modal close

Issue when used inside of iframe in Mobile Safari

I have a page iframed into another page. The iframe is set to be full width and height of the page. In this page I'm using this to show a modal. This works fine on desktop browsers, but in Mobile Safari the results are a bit off.

It appears that the modal can't figure out the height of the page. No matter what I do, I can't get the modal to show at the current viewport or even fixed to the top.

Here's a short example to see it work by iframing the Bulma Modal FX page. Load this on Mobile Safari and you can see the weird results.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Modal in Frame</title>

    <style media="screen">
      body, html{
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
      }

      #frame{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
      }
    </style>
  </head>
  <body>
    <iframe id="frame" src="https://postare.github.io/bulma-modal-fx/" width="100%" height="100%" frameborder="0"></iframe>
  </body>
</html>

image examples

would you include some image examples in modal?

Example Use bulma-modal-fx with Reactjs

So I installed from NPM and add css into my index.html. But I didn't see the effect happening in my web app. Could you give an example how to use it with Reactjs? Thanks!

Doesn't work because forEach is unsupported by IE 11

Bulma-Modal-Fx doesn't work on IE 11.

NodeList.prototype.forEach() - Web API | MDN

Modal does not open when "Just Read" chrome extension is active

Took me a bit to figure this one out 🤔.

But the Chrome extension Just Read for some reason doesn't allow the modal to be opened.

I've tried to debug this, but I'm not really an expert in debugging Chrome extensions. Maybe it adds some elements on the DOM that collide with the inlined styles that are being added upon modal activation.

EDIT: I'm not sure if this part of a bigger problem. But the modal on the official Bulma documentation works fine for me.

NPM

would you release this as npm package?

would be good if we could be able to link to it online,
so we could use it on codepen / jsfiddle and similar online editors

Is this compatible with the latest bulma?

It doesn't seem to be. None of the effects are working when I use it.

Any chance of updating it to work with the latest bulma?