Modal

A modal is like a digital pop-up book, presenting information in a way that demands your attention. It's the trusty sidekick of web pages, helping users navigate and interact with a website without feeling overwhelmed by a barrage of text. With a modal, you can easily display important information, without having to scroll through endless pages of content.

Example

<div class="overlay show">
  <a href="#" onclick="event.preventDefault();modals.open(modals.elements[0])">Toggle Modal component</a>
  <dialog class="modal" role="alert">
    <div>
      <div>
        title
      </div>
      <div>
        <a href="#" onclick="event.preventDefault();modals.close(modals.elements[0])" class="btn blank">
          <svg width="16" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
        </a>
      </div>
    </div>
    <div>
      Use Instagram posts to share your products with millions of people. Let shoppers buy from your store without leaving Instagram.
    </div>
    <div>
      <div style="display: flex, align-items: center; justify-content: end;gap: 7px;">
        <button class="btn">Submit</button>
        <button class="btn">Cancel</button>
      </div>
    </div>
  </dialog>
</div>

@use '~/styles/app.scss' as app;

$overlay: app.get-theme(app.$theme, 'components.overlay');

@include app.generate-component(
  $overlay,
  'overlay',
  app.$config,
  app.$theme
);

$button: app.get-theme(app.$theme, 'components.button');

@include app.generate-component(
  $button,
  'btn',
  app.$config,
  app.$theme
);

$modal: app.get-theme(app.$theme, 'components.modal');

@include app.generate-component(
  $modal,
  'modal',
  app.$config,
  app.$theme
);

const modal = (elements, options) => {

const defaults = {

};


// @TODO add scroll lock
// @TODO add ontransitionend
// @TODO add click outside event
// Options
const settings = Object.assign({}, defaults, options);

const _close = (modal) => {
  modal.toggleAttribute('open');
}

const _open = (modal) => {
  modal.toggleAttribute('open');
}

const _add_event_listeners_dom = () => {
  document.addEventListener('keydown', event => {
    if (event.key === 'Escape' || event.keyCode === 27) {
      [].forEach.call(elements, (modal) => {
        _close(modal);
      })
    }
  });
}

const _add_event_listeners = (modal) => {
  modal.addEventListener('click', (e) => {
    e.preventDefault();
  })
}

const _init = () => {
  _add_event_listeners_dom();
  [].forEach.call(elements, (sidecap) => {
    _add_event_listeners(sidecap);
  })
};

// Initiating the accordion
if(modal) {
  _init();
}

return ({
  elements : elements,
  open : (element) => {
    document.body.toggleAttribute('scroll-lock');
    _open(element);
  },
  close : (element) => {
    document.body.toggleAttribute('scroll-lock');
    _close(element);
  }
})
}

const modals = modal(document.querySelectorAll('.modal'), {
});