Skip to content
A simple modal overlay written in JavaScript for modern browsers
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitattributes
.gitignore
README.md

README.md

Modal

A simple modal overlay written in JavaScript for modern browsers. The main goal is to keep it small, clean and without third-party library dependencies.

======= Demos:

Features

  • Small: < 2kb after compression. < 0.7kb after compression and gzip.
  • No third-party library dependencies.
  • Simple: Nothing but a modal.
  • Customization: Use your own CSS to customize the look and feel.
  • Easy to use: Just include the script in your page.
  • Bootstrap: Use the Bootstrap CSS and HTML markup to get the modal Bootstraped.

Browser Support

IE10+, Chrome, Firefox, Safari, Opera. Has also been tested on Safari (iOS 7.1), IE10 (Windows Phone 8), Chrome 35 (Android 4.4.4).

License

NO COPYRIGHTS. NO LICENSES. DO WHAT YOU LIKE.

Usage

Include your custom CSS

<link rel="stylesheet" href="modal.css">

Include modal.js

<script src="modal.js"></script>

Example modal markup

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalTitle" aria-describedby="modal-content" aria-hidden="true">
    <div class="modal-dialog">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <div class="modal-content">
            <h3 id="myModalTitle">Lorem ipsum dolor</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </div>
    </div>
</div>

Button as trigger

The modal is triggered through the markup using the data-modal attribute.

<button data-modal="#myModal">Open modal</button>

Data attributes

  • data-modal: Activate the modal using the specified selector.
  • data-dismiss: Close the modal.

Contact

Please feel free to contact me.

You can’t perform that action at this time.