@andresclua/modal

Hello everyone! This is my second project within npm. Modal is a simple modal component. Here's an example

CSS Setup

1 - It's super easy to customize.

 .b--modal-a {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  transition: all 0.3s ease-in-out;
  width: 60%;
  background-color: #78f2c5;
  padding: 2rem;
  transition: transform 0.3s 0s ease;
}
.b--modal-a__btn {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: #1a191d;
}
.b--modal-a__btn__icon {
  color: #1a191d;
  height: 1rem;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .b--modal-a__btn__icon {
    width: 1rem;
  }
}
.b--modal-a__btn__icon path {
  fill: #1a191d;
}
.b--modal-a--is-active {
  visibility: visible;
  opacity: 1;
}

.b--modal-backdrop-a {
  visibility: visible;
  opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 100;
  background-color: rgba(26, 25, 29, 0.7);
  transform: translate(0px, 100%);
  transition: transform 0.3s 0s ease;
}
.b--modal-backdrop-a--is-active{
  transform: translate(0px, 0%);
}

JS Setup

2 - Install the package.

npm install @andresclua/modal

3 - Import the package and initialize it. Note that Modal() receives some parameters and it also has some callbacks that might be handy, like onHide() and onShow():

import Modal from '@andresclua/modal';

const modal = new Modal({
    backdrop: 'b--modal-backdrop-a', //class of the backdrop
    backdropActiveClass: 'b--modal-backdrop-a--is-active', //active class of the backdrop
    modal:'b--modal-a', //class of the modal
    modalIdTarget : 'modal-1', //ID of the modal
    modalActiveClass:'b--modal-a--is-active', //active class of the modal
    onHide : () => {
        //do something when the modal closes
    },
    onShow : () =>{
        //do something when the modal pops up
    }
});

You can also use the functions show() and hide() to use them at your convenience.

modal.show();

modal.hide()

4 - Your HTML structure should look like this

 <button type="button" class="b--btn-a" tf-ds-modal-target="modal-1">
    Launch demo modal
</button>

<div id="modal-1" class="b--modal-a" role="dialog">
    <h3 class="f--font-third">Welcome to a super modal</h3>
    <img src="https://www.turn-keytechnologies.com/wp-content/uploads/2020/02/aruba-mobility-master.png" alt="">
    <p class="">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
    <button class="b--modal-a__btn" tf-ds-modal-close="modal-1" aria-label="Close">
    <svg class="b--modal-a__btn__icon apb apb-close" viewBox="0 0 15.81 15.81" enable-background="new 0 0 15.81 15.81" xml:space="preserve">
        <path d="M8.74,8.03l6.82,6.82l-0.71,0.71L8.03,8.74l-7.07,7.07L0.25,15.1l7.07-7.07L0,0.71L0.71,0l7.32,7.32l7.07-7.07l0.71,0.71
        L8.74,8.03z"/>
    </svg>
    </button>
</div>

For Nuxt

1 - Create a file Modal.js inside plugins folder & add this.

import Modal from '@andresclua/modal';
export default ({ app }, inject) => {
    inject('Modal', data => new Modal(data) );
};

2 - Reference in your nuxt.config.js

plugins: [
    { src: '~/plugins/modal.js', ssr: false }
  ]

3 - Use it in your .vue file

mounted(){
   const modal = this.$Modal({
      backdrop: 'b--modal-backdrop-a', //class of the backdrop
      backdropActiveClass: 'b--modal-backdrop-a--is-active', //active class of the backdrop
      modal:'b--modal-a', //class of the modal
      modalIdTarget : 'modal-1', //ID of the modal
      modalActiveClass:'b--modal-a--is-active', //active class of the modal
      onHide : () => {
          //do something when the modal closes
      },
      onShow : () =>{
          //do something when the modal pops up
      }
  });
}

Github Profile