An extremely simple modal plugin developed with Vanilla JS
View demo here
You can download the latest version or checkout all the releases here.
Require the package or use the global Modal
namespace:
<script>
require(["path/to/modal.js"], function(Modal) {
// Code here
});
</script>
var Modal = require('modal');
import Modal from 'modal';
<script src="path/to/modal.js"></script>
Open modal with custom content or html:
<script>
new Modal({
content: '<div class="my-class">Content of my modal here</div>'
});
</script>
Open modal indicating an element in the HTML:
<div class="mdl-content" style="display: none">
<h2>Modal content here</h2>
</div>
<script>
var mdl = document.querySelector('.mdl-content');
new Modal({
content: mdl
});
</script>
The script expect the following options:
Value | Description |
---|---|
content | String/DOM node. Required. The content of your modal. |
minHeight | Integer/String. Optional. The min-height of modal. Default is 250px. |
maxWidth | Integer/String. Optional. The min-height of modal. Default is 600px. |
onOpen | Optional. Function to run after modal is open. |
onClose | Optional. Function to run after modal is closed. |
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
IE 10+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
Check CONTRIBUTING.md for more information.
Check Releases for detailed changelog.