JavaScript Modal
The jSuites.modal
is a lightweight responsive and flexible JavaScript modal plugin. It has excellent performance and usability, and it works great on small screens. The plugin can be used as a vanilla JavaScript or a webcomponent as below:
Webcomponent
Source code
<html> <script src="https://jsuites.net/v3/jsuites.js"></script> <script src="https://jsuites.net/v3/jsuites.webcomponents.js"></script> <link rel="stylesheet" href="https://jsuites.net/v3/jsuites.css" type="text/css" /> <jsuites-modal title="Webcomponent Modal" closed="true" width="600" height="480"> This is an example how to create a modal based on the custom HTML javascript modal. </jsuites-modal> <input type='button' value='Open the modal' onclick="document.querySelector('jsuites-modal').modal.open()" class='plain'> <script> document.querySelector('jsuites-modal').addEventListener('onopen', function() { console.log('Modal is open'); }); document.querySelector('jsuites-modal').addEventListener('onclose', function() { console.log('Modal is closed'); }); </script> </html>