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.