bulma-modal-fx

WebJar for bulma-modal-fx

License

License

MIT
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

bulma-modal-fx
Last Version

Last Version

1.1.1
Release Date

Release Date

Type

Type

jar
Description

Description

bulma-modal-fx
WebJar for bulma-modal-fx
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

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

Download bulma-modal-fx

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/bulma-modal-fx/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>bulma-modal-fx</artifactId>
    <version>1.1.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/bulma-modal-fx/
implementation 'org.webjars.npm:bulma-modal-fx:1.1.1'
// https://jarcasting.com/artifacts/org.webjars.npm/bulma-modal-fx/
implementation ("org.webjars.npm:bulma-modal-fx:1.1.1")
'org.webjars.npm:bulma-modal-fx:jar:1.1.1'
<dependency org="org.webjars.npm" name="bulma-modal-fx" rev="1.1.1">
  <artifact name="bulma-modal-fx" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='bulma-modal-fx', version='1.1.1')
)
libraryDependencies += "org.webjars.npm" % "bulma-modal-fx" % "1.1.1"
[org.webjars.npm/bulma-modal-fx "1.1.1"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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);
org.webjars.npm

Posta.re

Versions

Version
1.1.1