https://github.com/nju33/mohill
💄 Hill-shaped modal element
https://github.com/nju33/mohill
library modal pure-javascript
Last synced: 4 months ago
JSON representation
💄 Hill-shaped modal element
- Host: GitHub
- URL: https://github.com/nju33/mohill
- Owner: nju33
- License: mit
- Created: 2017-03-22T02:35:32.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-22T02:44:28.000Z (about 9 years ago)
- Last Synced: 2025-10-22T12:49:01.659Z (8 months ago)
- Topics: library, modal, pure-javascript
- Language: HTML
- Homepage: https://www.npmjs.com/package/mohill
- Size: 825 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Mohill
💄 Hill-shaped modal element
## Install or Download
```sh
yarn add mohill
npm i -S mohill
```
Or access to [releases page](https://github.com/nju33/mohill/releases).
Then, download the latest version.
## Usage
First, if you read as a separate file
```html
```
Please specify `id` for children of target element.
It will be used when opening.
```html
...
```
For example, if you want to set an event for an element in `#foo`, please set it before creating Mohill instance.
```js
import Mohill from 'mohill';
document.getElementById('close-button').addEventListener('click', () => {
mohill.close();
});
const mohill = new Mohill({
target: getElementById('target'),
data: {
style: {
// defaults
height: '70vh',
width: '70%',
coverBackgroundColor: 'rgba(0,0,0,.4)',
backgroundColor: '#222',
borderRadius: '6px'
}
}
});
document.getElementById('foo-trigger').addEventListener('click', () => {
mihill.open('foo');
});
document.getElementById('bar-trigger').addEventListener('click', () => {
// If you want to change the style
mihill.setStyle({backgroundColor: '#ccc'});
mihill.open('bar');
});
```
### Example
- `test/fixtures/index.js`
- `example/webpack/index.js`
## LICENSE
The MIT License (MIT)
Copyright (c) 2017 nju33