PicoModal.js 2KB Minified Popup/Modal Window Library in Javascript Full Examples With Source Code

PicoModal.js 2KB Minified Popup/Modal Window Library in Javascript Full Examples With Source Code

 

Welcome folks today in this blog post we will be looking at picomodal.js 2kb minified popup/modal window in javascript. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

About

 

A small, self-contained JavaScript modal library. Plain, vanilla JS.

 

  • Small: At around 2kb minified & gzipped, it’s small and easily embeddable
  • No Dependencies: PicoModal does not depend on any other JS libraries, so you can use it in places where you don’t have access to one
  • Self-contained: No extra CSS or images required; just the JS
  • Simple: The interface is straight forward and easy to use
  • Customizable: By changing a few settings you can customize or completely replace the default styles and behaviour
  • Accessible: Handles focus management, keyboard events and Aria tags

 

 

Download

 

The latest version of PicoModal is available here: Download

 

 

Basic Example

If all you want to do is display a modal, it’s as easy as this: (Run this code)

  picoModal("Ah, the pitter patter of tiny feet in huge combat boots.").show();

If you plan on showing the same modal multiple times, make sure you keep a reference to the instance, like this: (Run this code)

  var modal = picoModal("Ah, the pitter patter of tiny feet in huge combat boots.");
  document.getElementById("modal").addEventListener("click", function(){
      modal.show();
  });

For more control over the behaviour of the modal, you can pass in a settings object: (Run this code)

  picoModal({
      content: "Ah, the pitter patter of tiny feet in huge combat boots.",
      overlayStyles: {
          backgroundColor: "#169",
          opacity: 0.75
      }
  }).show();

 

See also  Koa.js Tutorial to Delete Existing Cookies with Expiration Time Using ctx.cookies.set() Method in Browser Full Project For Beginners

 

Manually Closing a Modal

If you want to programatically close the modal you can do it like this: (Run this code)

  var modal = picoModal(
      "<p>Ah, the pitter patter of tiny feet in huge combat boots.<p>"
      + "<p><a href='#' class='dismiss'>Dismiss</a></p>"
  ).show();

  document.body.addEventListener('click', function(event) {
    if( /\bdismiss\b/.test(event.target.className) ) {
      modal.close();
    }
  });

Or you can use a more targetted implementation with the afterCreate event: (Run this code)

  picoModal(
      "<p>Ah, the pitter patter of tiny feet in huge combat boots.<p>"
      + "<p><a href='#' class='dismiss'>Dismiss</a></p>"
  ).afterCreate(function(modal){
      modal.modalElem().getElementsByClassName("dismiss")[]
          .addEventListener('click', modal.close);
  }).show();

You can also attach an event to fire when the modal is closed: (Run this code)

  picoModal("Ah, the pitter patter of tiny feet in huge combat boots.")
      .afterClose(function () { alert("Closed"); })
      .show();

 

 

Single Shot Modal

You can use the afterClose event and the destroy method to create a modal that will clean up after itself when it is closed, like this: (Run this code)

  picoModal("Ah, the pitter patter of tiny feet in huge combat boots.")
      .afterClose(function (modal) { modal.destroy(); })
      .show();

Dialog

There is no built in dialog option, but there are tools to make it easy to implement one yourself. If you think about it, dialogs are really just modals that have some sort of ‘result’. To achieve this, add click handlers that send data to the afterClose function indicating the result: (Run this code)

picoModal({
    content: "<p>Ah, the pitter patter of tiny feet in huge combat boots.</p>" +
        "<p class='footer'>" +
        "<button class='cancel'>Cancel</button> " +
        "<button class='ok'>Ok</button>" +
        "</p>"
}).afterCreate(modal => {
    modal.modalElem().addEventListener("click", evt => {
        if (evt.target && evt.target.matches(".ok")) {
            modal.close(true);
        } else if (evt.target && evt.target.matches(".cancel")) {
            modal.close();
        }
    });
}).afterClose((modal, event) => {
    alert(event.detail ? "Ok" : "Cancelled");
}).show();

 

See also  Grid.js Modern Javascript Data Table Library For Rendering Data Tutorial for Beginners 2020

 

picoModal({
      content: "Ah, the pitter patter of tiny feet in huge combat boots.",
      overlayStyles: function (styles) {
          styles.opacity = 0.1;
          return styles;
      }
  }).show();

 

 

Leave a Reply