ceri-modal

ceri-modal

the best modal you can get.

Features:

• plain JS - no dependencies
• 25kB unzipped with animations - even smaller when using multiple ceri components
• themeable
• use in your markup - easy to reason about

Demo

Install

npm install --save-dev ceri-modal

Usage

• general ceri component usage instructions
• in your project

window.customElements.define("ceri-modal", require("ceri-modal"))

<!-- as sibling (preferred) -->
<button> Open Modal </button>
<ceri-modal attach>
    Content
</ceri-modal>
<!-- as child -->
<button> Open Modal 
  <ceri-modal attach>
      Content
  </ceri-modal>
</button>

For examples see dev/.

Note, that the modal will be appended to document.body on first opening.

Props

Name	type	default	description
attach	String	null	will set a click listener to toggle the modal on resolved Element by querySelector. if string is empty it will use sibling or parent
opacity	Number	0.5	opacity of the overlay
keep-open	Boolean	false	will be not close on click on overlay or ESC
open	Boolean	false	set to open / close
z-index	Number	1500	minimum zIndex of the overlay
bottom-sheet	Boolean	false	will appear from below

Events

Name	description
toggled(isOpened:Boolean)	emitted before open and after close

Themes

• ceri-materialize

<button class=btn>Click me!</button>
<!-- 
add fixed-footer class for fixed-footer 
and/or bottom-sheet attribute for bottom-sheet
-->
<ceri-modal class=materialize attach> 
  <div class=modal-content>
    someContent
  </div>
  <div class=modal-footer>
    footer content
  </div>
</ceri-modal>

Custom animation

• read the documentation of the animate mixin.
• read and understand the default animation in src/modal.coffee
• you can provide a custom animation like this:

# application wide
CEModal = require("ceri-modal")
CEModal.prototype.enter = (o) -> # your new enter animation
CEModal.prototype.leave = (o) -> # your new leave animation
window.customElements.define("ceri-modal", CEModal)
# single instance
# get a ref to your instance of ceri-modal somehow
# then overwrite the animations directly
ceModal.enter = (o) -> # your new enter animation
ceModal.leave = (o) -> # your new leave animation

Development

Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.

Notable changes

0.2.0

• use ceri-materialize@2

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.