Create Custom Modals with HTML Attributes or JavaScript – SWM

Preview:

Description:

SWM (SenangWebs Modals) is a lightweight JavaScript library for creating and managing modal windows.

It currently provides 2 simple ways to create modal windows: a declarative approach using HTML data attributes and a programmatic approach using a JavaScript API. This flexibility allows you to create customizable modal windows in your existing web projects easily.

More Features:

• Fully responsive design.
• Custom modal titles and footers.
• Smooth open/close animations.
• Control modal placement, colors, blur, and z-index.

How to use it:

1. Download the SWM package and include the following JS/CSS files in your HTML document:

<link rel="stylesheet" href="/dist/swm.css">
<script src="/dist/swm.js"></script>

2. Create a modal window by defining HTML data attributes as follows. This will enable a toggle button to launch the modal window:

<div data-swm id="myModal">
  <button data-swm-btn 
          data-swm-title="My Modal"
          data-swm-footer="I am a modal footer">
          Modal Trigger
  </button>
  <div data-swm-body>
    <p>Modal Content Here.</p>
  </div>
</div>

// Launch the modal window manually
SWM.openModal('#myModal');

3. You can also create the modal window entirly in JavaScript:

SWM.createModal({
  title: 'Modal Title',
  content: '<p>Modal Content</p>',
  footer: 'Modal Footer',
});

4. All available configuration options and their corresponding HTML data attributes:

SWM.createModal({
  // modal title
  // data-swm-title
  title: '',
  // modal content
  // supports HTML content
  // data-swm-body
  content: '',
  // modal footer
  // data-swm-footer
  footer: '',
  // position of the modal
  // center,top, top left, top right, 
  // bottom, bottom left, bottom right, 
  // left, right
  // data-swm-position
  position: 'center',
  // background color
  // data-swm-bg-color
  bgColor: '#000000',
  // background opacity
  // data-swm-bg-opacity
  bgOpacity: '0.5',
  // the blur effect in px
  // data-swm-bg-blur
  bgBlur: '0',
  // z-index of the background overlay
  // data-swm-z-index
  zIndex: '1000'
});

Changelog:

11/03/2024

• Update styles