Material Modal
Click here for a demo.
What is it?
An animated modal dialog styled for use with Material Design Lite.
Installation
Bower
bower install material-modal --save
NPM
npm install material-modal --save
After Bower or NPM install, copy the files from dist/css
and dist/js
to your project's assets folder.
Without a Package Manager
Clone repo, or download zip.
Usage
A working sample is available in the download, in the 'demo' folder.
Create an element with the class .modal__trigger
. Add the data-modal
attribute with a value of the id of the target modal.
Create a div
with the class .modal
, with another nested div with the class .modal__content
.
Optionally you can add a .modal__header
and .modal__footer
. To close the modal, you can click the background, or create an element with the class .modal__close
.
Here is a sample HTML structure using Material Design Lite:
... Material Design Modal Demo <!-- Default MDL CSS --> <!-- MDL Icons --> <!-- For Demo Only --> Launch Modal Modal Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam accusantium facere suscipit, alias accusamus corrupti consequatur at porro, voluptates commodi sed omnis voluptatem, ex officiis illum, architecto fugiat id? Close <!-- MDL JavaScript -->
Development
Feel free to do what you'd like with this. Clone or fork the repo, type npm install
and have your way with it. Use grunt build
to compile Less to CSS, lint and minify JS, and update the dist
and demo
folders. Use grunt default
to run the build, and continue to watch the Less and JavaScript files for changes.
Material Modal © 2015-2017, Mark Rabey. Released under the MIT License.
Authored and maintained by Mark Rabey
markrabey.com · GitHub @MarkRabey · Twitter @MarkRabey