Micromodal.js Popup Modal Window Library in Javascript With Examples Full Project For Beginners



Welcome folks today in this blog post we will be looking at the modal popup window library called micromodal.js in javascript with examples. All the full source code of the application is shown below.




Get Started







You can install this library using the npm command or yarn as shown below



npm i micromodal


yarn add micromodal



You can also download or link to the latest compiled version using the CDN.








1. Add the modal markup



<!-- [1] -->
<div id="modal-1" aria-hidden="true">

  <!-- [2] -->
  <div tabindex="-1" data-micromodal-close>

    <!-- [3] -->
    <div role="dialog" aria-modal="true" aria-labelledby="modal-1-title" >

        <h2 id="modal-1-title">
          Modal Title

        <!-- [4] -->
        <button aria-label="Close modal" data-micromodal-close></button>

      <div id="modal-1-content">
        Modal Content



See also  JavaScript Program to Convert Decimal to Binary in Browser Full Project For Beginners



import MicroModal from 'micromodal';  // es6 module
var MicroModal = require('micromodal'); // commonjs module









  onShow: modal => console.info(`${modal.id} is shown`), // [1]
  onClose: modal => console.info(`${modal.id} is hidden`), // [2]
  openTrigger: 'data-custom-open', // [3]
  closeTrigger: 'data-custom-close', // [4]
  openClass: 'is-open', // [5]
  disableScroll: true, // [6]
  disableFocus: false, // [7]
  awaitOpenAnimation: false, // [8]
  awaitCloseAnimation: false, // [9]
  debugMode: true // [10]



Leave a Reply