Easy Modal Popup In JavaScript – Minitaur.js

Minitaur.js is an easy-to-use JavaScript library that turns any element into a customizable modal window.

How to use it:

1. Download and import the Minitaur.js library into the document.

<script src="minitaur.js"></script>

2. Initialize the Minitaur.js.

minitaur();

3. That’s it. The library automatically turns any element with the ‘minitaur’ class or ‘data-minitaur’; attribute into a modal window:

<div class="my-modal" 
     data-minitaur 
     data-minitaur-opened>
     <p>Open On Page Load</p>
     <button type="button" data-minitaur-close>Close</button>
</div>

4. You can also create a modal window programmatically, which means that you don’t have to create a modal element as introduced above.

minitaur({
  content: '<p>Any Modal Content Here.</p>',
  mount: false,
  opened: true,
  style: {
    backgroundColor: '#fff',
    padding: '10px'
  },
  takeover: true,
})

5. Mount the modal on any element you provide.

minitaur('#customElement');
// or
minitaur({
  mount: document.getElementById('customElement')
})

6. Full options to customize the modal.

minitaur({
  // Accepts a String that will be passed to document.querySelector, an HTMLElement, or an Object containing x and/or y keys set to the before mentioned types to have the modal base it's horizontal and vertical positions on two different elements.
  // If this (or either of the x/y object keys) is set to 'viewport', the currently visible viewport will be used, also the modal's position will automatically be updated when the user scrolls the page.
  // If this (or either of the x/y object keys) is set to null, it will default to document.body unless the modal was opened via a trigger in which case it will default to the element that initiated the triggered event.
  anchor: null,
  backdropClass: 'minitaur-backdrop',
  backdropClosingStyle: null,
  backdropOpeningStyle: null,
  backdropStyle: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  },
  // An Object of options that are set depending on the browser window's width.
  breakpoints: null,
  class: 'minitaur',
  closeClass: 'closed',
  closeDuration: 0,
  closingClass: 'closing',
  closingStyle: null,
  closeOnFocusOut: true,
  closeStyle: {
    display: 'none',
    visibility: 'hidden'
  },
  content: null,
  id: null,
  mount: '.minitaur, [data-minitaur]',
  opened: false,
  openClass: 'opened',
  openDuration: 0,
  openingClass: 'opening',
  openingStyle: {
    display: 'block',
    visibility: 'visible'
  },
  openStyle: null,
  parameters: null,
  // 'left', 'inner-left', 'middle', 'inner-right', 'right', 'top', 'inner-top', 'middle', 'inner-bottom', 'bottom'
  position: 'middle', 
  respectAnchorSpacing: false,
  stayInBounds: true,
  style: null,
  // Set to true to have a backdrop added behind the modal and disable page scroll while the modal is open.
  takeover: false,
  // Custom trigger element
  triggers: [],
})

7. You can also pass the options via HTML data attributes:

<div class="modal-style" 
     data-minitaur 
     data-minitaur-opened 
     data-minitaur-position="top middle" 
     data-minitaur-close-on-focus-out="false">
     ...
</div>

8. Callback functions.

minitaur({
  afterClose: function (modal) {
    // do something
  },
  afterInit: function (modal) {
    // do something
  },
  afterOpen: function (modal) {
    // do something
  },
})

9. API methods and properties.

// global methods
minitaur.close('#myModal');
minitaur.kill('#myModal', false)
minitaur.open('#myModal', {
  // options
})
minitaur.set('#myModal', {
  // options
})
minitaur.toggle('#myModal')
// instance methods
modal.minitaur.close()
modal.minitaur.kill(false)
modal.minitaur.open({
  // options
})
modal.minitaur.set({
  // options
})
modal.minitaur.toggle()
// properties
modal.minitaur.isOpen

10. Events.

modal.addEventListener('open', function (e) {
  // do something
})
modal.addEventListener('close', function (e) {
  // do something
})

Changelog:

v0.3.0 (05/25/2023)

• Bugfix