https://github.com/null-none/simple-modals

Simple, dependency free javascript modal
https://github.com/null-none/simple-modals

bootstrap css js modal

Last synced: 13 days ago
JSON representation

Simple, dependency free javascript modal

• Host: GitHub
• URL: https://github.com/null-none/simple-modals
• Owner: null-none
• License: mit
• Created: 2022-05-22T14:56:22.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-05-22T15:37:41.000Z (almost 4 years ago)
• Last Synced: 2025-06-13T22:41:12.214Z (11 months ago)
• Topics: bootstrap, css, js, modal
• Language: HTML
• Homepage:
• Size: 39.1 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# simple-modals

Simple, dependency free javascript modal

simple-modals is a **tiny** javascript and CSS modal library. It works very similarly to Bootstrap modals, without the need for jQuery or Bootstrap. In fact, simple-modals can be swapped out with Bootstrap modals without making any changes to your markup.

simple-modals exposes a single global method, `modal()`, that can be used to launch modals with JavaScript. However, the primary means of using simple-modals is through the use of HTML classes and attributes.

## Features

* Dependency free, no jQuery or Bootstrap

* Tiny

    * JS compressed, gzipped - 534 bytes

    * CSS compressed, gzipped - 593 bytes

* Responsive sizing

    * Modal size responds to viewport size

    * Modals never extend outside the viewport

* Optional size classes

    * modal-sm

    * modal-md

    * modal-lg

    * modal-xl

* Click delegation

    * Modals and buttons that are dynamically created will still work

* Swappable with Bootstrap

    * simple-modals uses the same class names and `modal()` method as Bootstrap, making it super simple to swap out as your project grows

## Install

```bash

npm install simple-modals

```

## Sample Code

```html

    

        

        Simple Modal Demo

        

    

    

        Launch Modal

        


            


                


                    
×

                    
My Simple Modal

                    


                        Lorem ipsum dolor sit amet, consectetur adipisicing elit,

                        sed do eiusmod tempor incididunt ut labore et dolore magna

                        aliqua.

                



            

        

        

    


```