Easily create modals without external dependencies.
For a demo, visit https://bartzweers.github.io/native-js-modals/
<script src="./js/native-modals.min.js"></script>
<link href="./css/nmodal.css" rel="stylesheet" type="text/css" media="screen, handheld, projection"><div id="testModal" class="nModal">
<form action="">
<div class="nModal-header">Modal 1</div>
<div class="nModal-body">Body of the modal</div>
<div class="nModal-buttons">
<a href="" class="nModal-button nModal-button__ok" data-nmodal-callback="callback">Ok</a>
<a href="" class="nModal-button nModal-button__cancel">Cancel</a>
</div>
</form>
</div><div id="modal">
<form action="">
<!-- Your content here. -->
</form>
</div>The data-nmodal attribute refers to the ID of the targeted modal element.
<a href="" data-nmodal="testModal">Click here</a> to open the modal.nModal.init({ watch: true });| Property | Possible values | Function |
|---|---|---|
watch |
true false |
Automatically watches for DOM changes and injects newly created/updated modals |
backdrop |
true false |
Adds a backdrop to the modal |
size |
"small" "large" "max" |
Assigns a size to the modal |
There are also in-line properties you can access when triggering a modal.
<a href=""
data-nmodal="testModal"
data-nmodal-size="max">
Open a maximised modal that targets #testModal
</a>If you want to further customize the modal or use callbacks and custom functions, read below.
If you want to use a callback, add the data-nmodal-callback attribute to an element within the modal, like so:
<a href="" data-nmodal-callback="callback">Click to activate callback</a>function callback(formElement){
console.log('Callback called', formElement);
nModal.close();
}The callback is by default called by passing the <form></form> inside the modal, so you can use the data stored in the modal.