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

 

 

 

Installation

 

 

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.


https://unpkg.com/micromodal/dist/micromodal.min.js

 

 

 

Usage

 

 

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" >


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

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

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

    </div>
  </div>
</div>

 

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

 

 

MicroModal.init();

 

 

Configuration

 

 

MicroModal.init({
  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