Mobile-friendly Modal Window – Easy Popup

Preview:

Description:

A tiny, easy-to-use, mobile-friendly modal popup library written in JavaScript and CSS/CSS3.

Features:

• Smooth animations based on CSS3 transitions and transforms.
• Blurs the main content when the modal popup is activated.
• Pretty nice clean design.
• Automatically turns the modal into a fullscreen swipeable popup on the mobile device.

How to use it:

1. Import the Easy Popup’s JavaScript and CSS files.

<link rel="stylesheet" href="dist/easy-popup.min.css">
<script src="dist/easy-popup.min.js"></script>

2. Add your modal content to a DIV container, assign a unique ID to it using the data-easy-popup attribute, and define the title in the data-easy-popup-title attribute.

<div data-easy-popup="example" data-easy-popup-title="My Modal Popup">
  Modal Content Here
</div>

3. Toggle the modal popup with an anchor link.

<a href="#example">
  Launch Modal Popup
</a>

4. Or via the open() method.

EasyPopup.get('example').open();

5. Create & toggle the modal popup programmatically.

<div class="example-2">
  Modal Content
</div>

<a class="trigger">
  Launch Modal Popup
</a>

EasyPopup.init('.example-2', {
  id: 'example-2',
  title: 'Modal Popup 2',
  triggerSelector: '.trigger',
});

6. Customize the close button.

EasyPopup.init('.example-2', {
  id: 'example-2',
  title: 'Modal Popup 2',
  triggerSelector: '.trigger',
  closeButtonHTML: `<span>Close</span>`
});

7. Add an extra CSS class to the modal popup.

EasyPopup.init('.example-2', {
  id: 'example-2',
  title: 'Modal Popup 2',
  triggerSelector: '.trigger',
  outerClass: 'custom-class',
});

8. Determine whether to enable mobile layout on small screens. Default: true.

EasyPopup.init('.example-2', {
  id: 'example-2',
  title: 'Modal Popup 2',
  triggerSelector: '.trigger',
  hasMobileLayout: false,
});

9. Set the theme of the popup.

EasyPopup.init('.example-2', {
  id: 'example-2',
  title: 'Modal Popup 2',
  triggerSelector: '.trigger',
  theme: 'default', // or right-side
});

10. Determine whether to allow the user to close the popup by pressing the ESC key. Default: true.

EasyPopup.init('.example-2', {
  id: 'example-2',
  title: 'Modal Popup 2',
  triggerSelector: '.trigger',
  keyboard: false,
});

11. You can also pass options via HTML data attributes as follows:

<div data-easy-popup="demo"
     data-easy-popup-mobile="true"
     data-easy-popup-title="Popup title"
     data-easy-popup-theme="right-side">
    <p>Your content.</p>
</div>

12. API methods.

const myPopup = EasyPopup.get('example');
myPopup.open();
myPopup.close();
myPopup.toggle();

Changelog:

v0.0.5 (08/31/2022)

• add option keyboard for easy popup

v0.0.4 (08/30/2022)

• add theme right side