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.