@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 - Initialize the package in your JS file by importing it and creating a new instance of it.

import Modal from '@andresclua/modal';
new Modal()  

Modal receives some parameters and has some callbacks that might be handy:

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();

setTimeout(()=>{
    modal.hide()
}, 7500)

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 }) => {
    new Modal()
};

2 - Reference in your nuxt.config.js

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

3 - Use it in your .vue file

mounted(){
   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
        }
    });
}

Github Profile