https://github.com/pjaerr/vanilla-modal
A material design-esque modal that only uses HTML, CSS and JS.
https://github.com/pjaerr/vanilla-modal
Last synced: 11 months ago
JSON representation
A material design-esque modal that only uses HTML, CSS and JS.
- Host: GitHub
- URL: https://github.com/pjaerr/vanilla-modal
- Owner: Pjaerr
- License: unlicense
- Created: 2017-08-18T11:02:32.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-19T11:59:38.000Z (almost 9 years ago)
- Last Synced: 2025-05-08T22:53:57.199Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 4.88 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vanilla-modal
A material design-esque modal that uses no libraries, only HTML, CSS and JS. Other things on the modal such as buttons and text fields won't fit material design**.
Include ```modal.css``` at the top of your html file, and ```modal.js``` at the bottom of your html file.
``````
``````
First put the html code below somewhere in your body, anything outside of this div will be covered
by a black overlay and rendered unusable (apart from the modal) when the modal is toggled on.
```
```
Next, put this html code somewhere in your body, it will add the modal in a hidden state to your page.
The modal will be centered via "margin: 0 auto;" but this can be changed in the css.
```
Close
Modal Title
```
To open or close the modal, call the function 'toggleModal()'.
Hopefully this is useful to someone, it doesn't depend on any libraries and so I thought I should share it as it is easy to add to a web page. If you wish to change the code and make it better, by all means create a pull request.
