https://github.com/kenangundogan/javascript-modal

Javascript modal - tiny and simple.
https://github.com/kenangundogan/javascript-modal

javascript javascript-modal modal modal-box modal-window

Last synced: 25 days ago
JSON representation

Javascript modal - tiny and simple.

• Host: GitHub
• URL: https://github.com/kenangundogan/javascript-modal
• Owner: kenangundogan
• License: mit
• Created: 2021-04-09T19:12:02.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2021-04-11T07:30:26.000Z (almost 5 years ago)
• Last Synced: 2025-01-19T16:10:50.372Z (about 1 year ago)
• Topics: javascript, javascript-modal, modal, modal-box, modal-window
• Language: SCSS
• Homepage:
• Size: 141 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# Javascript Modal

Javascript modal - tiny and simple.

## Status

[![JS gzip size](https://img.badgesize.io/kenangundogan/javascript-modal/main/dist/script/script.js?compression=gzip&label=JS%20gzip%20size)](https://github.com/kenangundogan/javascript-modal/blob/main/dist/script/script.js)

[![JS Brotli size](https://img.badgesize.io/kenangundogan/javascript-modal/main/dist/script/script.js?compression=brotli&label=JS%20Brotli%20size)](https://github.com/kenangundogan/javascript-modal/blob/main/dist/script/script.js)

[![CSS gzip size](https://img.badgesize.io/kenangundogan/javascript-modal/main/dist/style/style.css?compression=gzip&label=CSS%20gzip%20size)](https://github.com/kenangundogan/javascript-modal/blob/main/dist/style/style.css)

[![CSS Brotli size](https://img.badgesize.io/kenangundogan/javascript-modal/main/dist/style/style.css?compression=brotli&label=CSS%20Brotli%20size)](https://github.com/kenangundogan/javascript-modal/blob/main/dist/style/style.css)

![Javascript Modal](https://raw.githubusercontent.com/kenangundogan/javascript-modal/main/asset/javascript-modal-cover.png)

## Options

Option | Type | Default | Description | Example

------ | ---- | ------- | ----------- | -----------

id | string |  | id DOM element | [Example](https://kenangundogan.github.io/javascript-modal)

data-position | string | center | special class can be added | [Example](https://kenangundogan.github.io/javascript-modal)

data-size | string | small | special class can be added | [Example](https://kenangundogan.github.io/javascript-modal)

data-transition | int | 300ms | opening and closing animation speed | [Example](https://kenangundogan.github.io/javascript-modal)

## Usage example

### Script

```javascript

var modal = new Modal;

```

### View

```html

Default



    


        

        ...

    



```


## Copyright and license

Designed and built by [Kenan Gündoğan](https://www.linkedin.com/in/kenangundogan/)




2021 Currently - Code released under the [MIT License](https://github.com/kenangundogan/javascript-modal/blob/master/LICENSE)

Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/)