Modal

VISPA-UI includes an expertly-crafted 8 varieties of Modals which can make your UI building experience effortless.

To use the Basic Modal component copy the code below to use it in your project. Make sure to include the JavaScript also.

              
              
<button 
  class="button btn-solid-primary" 
  id="basic-modal-btn"
>
  Basic Modal
</button>

<div class="modal__container" id="basic-modal-container">
  <section class="modal mdl__basic" id="basic-modal-el">
    <header class="modal__title">
      <h1 class="h-5">Modal Title</h1>
    </header>
    <main class="modal__body">
      <p class="bd-5">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Omnis blanditiis, explicabo deleniti rerum.
      </p>
    </main>
    <footer class="modal__footer">
      <button class="button btn-solid-primary modal__footer--btn">
        ACTION 1
      </button>
      <button class="button btn-outline-primary modal__footer--btn">
        ACTION 2
      </button>
    </footer>
  </section>
</div>

<!-- JavaScript -->
<script>
  const basicModalBtn = document.getElementById("basic-modal-btn");
  const basicModalContainer = document.getElementById("basic-modal-container");
  const basicModalEl = document.getElementById("basic-modal-el");

  basicModalBtn.addEventListener("click", () => {
    basicModalContainer.style.display = "flex";
    basicModalEl.style.display = "flex";
  });

  window.addEventListener("click", e => {
    if (e.target == basicModalContainer) {
      basicModalContainer.style.display = "none";
      basicModalEl.style.display = "none";
    }
  });
</script>

To use the Modal with Icons component copy the code below to use it in your project. Make sure to include the JavaScript also.

              
              
<button 
  class="button btn-solid-primary" 
  id="icon-modal-btn"
>
  Modal w/icons
</button>

<div class="modal__container" id="icon-modal-container">
  <section class="modal mdl__icons mdl-primary" id="icon-modal-el">
    <header class="modal__title">
      <h1 class="h-5">Modal Title</h1>
      <button 
        class="button btn-action btn-plain-icon modal__title--close" 
        id="modal-close-btn"
      >
        <img
              class="icon-light icon-lg button__icon"
              src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/close.svg"
        />
      </button>
    </header>
    <main class="modal__body">
      <p class="bd-5">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Omnis blanditiis, explicabo deleniti rerum.
      </p>
    </main>
    <footer class="modal__footer">
      <button class="button btn-solid-primary modal__footer--btn">
        ACTION 1
      </button>
      <button class="button btn-outline-primary modal__footer--btn">
        ACTION 2
      </button>
    </footer>
  </section>
</div>

<!-- JavaScript -->
<script>
  const iconModalBtn = document.getElementById("icon-modal-btn");
  const iconModalContainer = document.getElementById("icon-modal-container");
  const iconModalEl = document.getElementById("icon-modal-el");
  const modalCloseBtn = document.getElementById("modal-close-btn");

  iconModalBtn.addEventListener("click", () => {
    iconModalContainer.style.display = "flex";
    iconModalEl.style.display = "flex";
  });

  modalCloseBtn.addEventListener("click", () => {
    iconModalContainer.style.display = "none";
    iconModalEl.style.display = "none";
  })
</script>

To use the Share Link Modal component copy the code below to use it in your project. Make sure to include the JavaScript also.

              
              
<button class="button btn-solid-primary" id="sharelink-modal-btn">
  Share Link Modal
</button>

<div class="modal__container" id="sharelink-modal-container">
  <section class="modal mdl__icons mdl-primary mdl__share" id="sharelink-modal-el">
    <header class="modal__title">
      <h1 class="h-5">Share Modal</h1>
      <button 
        class="button btn-action btn-plain-icon modal__title--close"
        id="sharelink-modal-close-btn"
      >
        <img 
          class="icon-light icon-lg button__icon" 
          src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/close.svg"
        />
      </button>
    </header>
    <main class="modal__body">
      <p class="bd-5">Share the link via</p>
      <div class="modal__body--btn-cntr">
        <button class="button btn-socialmedia btn-solid-primary">
          <img 
            class="icon-light icon-md button__icon"
            src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/twitter.svg"
          />
        </button>
        <button class="button btn-socialmedia btn-solid-secondary">
          <img 
            class="icon-light icon-md button__icon"
            src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/facebook.svg"
            />
        </button>
        <button class="button btn-socialmedia btn-solid-danger">
          <img 
            class="icon-light icon-md button__icon"
            src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/instagram.svg"
            />
        </button>
        <button class="button btn-socialmedia btn-solid-secondary">
          <img 
            class="icon-light icon-md button__icon"
            src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/linkedin.svg"
            />
        </button>
        <button class="button btn-socialmedia btn-solid-danger">
          <img 
            class="icon-light icon-md button__icon"
            src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/youtube.svg"
            />
        </button>
      </div>
    </main>
    <footer class="modal__footer">
      <div class="link__container">
        <span class="modal__footer--link">example.com/share-this-link</span>
        <button class="button btn-solid-primary modal__footer--btn">Copy</button>
      </div>
    </footer>
  </section>
</div>

<!-- JavaScript -->
<script async>
  const sharelinkModalBtn = document.getElementById("sharelink-modal-btn");
  const sharelinkModalContainer = document.getElementById("sharelink-modal-container");
  const sharelinkModalEl = document.getElementById("sharelink-modal-el");
  const sharelinkModalCloseBtn = document.getElementById("sharelink-modal-close-btn");

  sharelinkModalBtn.addEventListener("click", () => {
    sharelinkModalContainer.style.display = "flex";
    sharelinkModalEl.style.display = "flex";
  });

  sharelinkModalCloseBtn.addEventListener("click", () => {
    sharelinkModalContainer.style.display = "none";
    sharelinkModalEl.style.display = "none";
  })
</script>

To use the Primary Modal component give the mdl-primary class to the modal element. Copy the code below to use it in your project. Make sure to include the JavaScript also.

              
              
<button class="button btn-solid-primary" id="primary-modal-btn">
  Primary Modal
</button>

<div class="modal__container" id="primary-modal-container">
  <section class="modal mdl__icons mdl-primary" id="primary-modal-el">
    <header class="modal__title">
      <h1 class="h-5">Modal Title</h1>
      <button 
        class="button btn-action btn-plain-icon modal__title--close"
        id="primarymodal-close-btn"
      >
        <img 
          class="icon-light icon-lg button__icon" 
          src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/close.svg"
          />
      </button>
    </header>
    <main class="modal__body">
      <p class="bd-5">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Omnis blanditiis, explicabo deleniti rerum.
      </p>
    </main>
    <footer class="modal__footer">
      <button class="button btn-solid-primary modal__footer--btn">
        ACTION 1
      </button>
      <button class="button btn-outline-primary modal__footer--btn">
        ACTION 2
      </button>
    </footer>
  </section>
</div>

<!-- JavaScript -->
<script async>
  const primaryModalBtn = document.getElementById("primary-modal-btn");
  const primaryModalContainer = document.getElementById("primary-modal-container");
  const primaryModalEl = document.getElementById("primary-modal-el");
  const primaryModalCloseBtn = document.getElementById("primarymodal-close-btn");

  primaryModalBtn.addEventListener("click", () => {
    primaryModalContainer.style.display = "flex";
    primaryModalEl.style.display = "flex";
  });

  primaryModalCloseBtn.addEventListener("click", () => {
    primaryModalContainer.style.display = "none";
    primaryModalEl.style.display = "none";
  })
</script>

To use the Danger Modal component give the mdl-danger class to the modal element. Copy the code below to use it in your project. Make sure to include the JavaScript also.

              
              
<button class="button btn-solid-danger" id="danger-modal-btn">
  Danger Modal
</button>

<div class="modal__container" id="danger-modal-container">
  <section class="modal mdl__icons mdl-danger" id="danger-modal-el">
    <header class="modal__title">
      <h1 class="h-5">Modal Title</h1>
      <button
        class="button btn-action btn-plain-icon modal__title--close"
        id="dangermodal-close-btn"
      >
        <img
          class="icon-light icon-lg button__icon"
          src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/close.svg"
        />
      </button>
    </header>
    <main class="modal__body">
      <p class="bd-5">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Omnis blanditiis, explicabo deleniti rerum.
      </p>
    </main>
    <footer class="modal__footer">
      <button class="button btn-solid-danger modal__footer--btn">
        ACTION 1
      </button>
      <button class="button btn-outline-danger modal__footer--btn">
        ACTION 2
      </button>
    </footer>
  </section>
</div>

<!-- JavaScript -->
<script async>
  const dangerModalBtn = document.getElementById("danger-modal-btn");
  const dangerModalContainer = document.getElementById("danger-modal-container");
  const dangerModalEl = document.getElementById("danger-modal-el");
  const dangerModalCloseBtn = document.getElementById("dangermodal-close-btn");

  dangerModalBtn.addEventListener("click", () => {
    dangerModalContainer.style.display = "flex";
    dangerModalEl.style.display = "flex";
  });

  dangerModalCloseBtn.addEventListener("click", () => {
    dangerModalContainer.style.display = "none";
    dangerModalEl.style.display = "none";
  })
</script>

To use the Success Modal component give the mdl-success class to the modal element. Copy the code below to use it in your project. Make sure to include the JavaScript also.

              
              
<button class="button btn-solid-success" id="success-modal-btn">
  Success Modal
</button>

<div class="modal__container" id="success-modal-container">
  <section class="modal mdl__icons mdl-success" id="success-modal-el">
    <header class="modal__title">
      <h1 class="h-5">Modal Title</h1>
      <button
        class="button btn-action btn-plain-icon modal__title--close"
        id="successmodal-close-btn"
      >
        <img 
          class="icon-light icon-lg button__icon"
          src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/close.svg"
        />
      </button>
    </header>
    <main class="modal__body">
      <p class="bd-5">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Omnis blanditiis, explicabo deleniti rerum.
      </p>
    </main>
    <footer class="modal__footer">
      <button class="button btn-solid-success modal__footer--btn">
        ACTION 1
      </button>
      <button class="button btn-outline-success modal__footer--btn">
        ACTION 2
      </button>
    </footer>
  </section>
</div>

<!-- JavaScript -->
<script async>
  const successModalBtn = document.getElementById("success-modal-btn");
  const successModalContainer = document.getElementById("success-modal-container");
  const successModalEl = document.getElementById("success-modal-el");
  const successModalCloseBtn = document.getElementById("successmodal-close-btn");

  successModalBtn.addEventListener("click", () => {
    successModalContainer.style.display = "flex";
    successModalEl.style.display = "flex";
  });

  successModalCloseBtn.addEventListener("click", () => {
    successModalContainer.style.display = "none";
    successModalEl.style.display = "none";
  })
</script>

To use the Warning Modal component give the mdl-warning class to the modal element. Copy the code below to use it in your project. Make sure to include the JavaScript also.

              
              
<button class="button btn-solid-warning" id="warning-modal-btn">
  Warning Modal
</button>

<div class="modal__container" id="warning-modal-container">
  <section class="modal mdl__icons mdl-warning" id="warning-modal-el">
    <header class="modal__title">
      <h1 class="h-5">Modal Title</h1>
      <button 
        class="button btn-action btn-plain-icon modal__title--close"
        id="warningmodal-close-btn"
      >
        <img 
          class="icon-dark icon-lg button__icon"
          src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/close.svg"
        />
      </button>
    </header>
    <main class="modal__body">
      <p class="bd-5">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Omnis blanditiis, explicabo deleniti rerum.
      </p>
    </main>
    <footer class="modal__footer">
      <button class="button btn-solid-warning modal__footer--btn">
        ACTION 1
      </button>
      <button class="button btn-outline-warning modal__footer--btn">
        ACTION 2
      </button>
    </footer>
  </section>
</div>

<!-- JavaScript -->
<script async>
  const warningModalBtn = document.getElementById("warning-modal-btn");
  const warningModalContainer = document.getElementById("warning-modal-container");
  const warningModalEl = document.getElementById("warning-modal-el");
  const warningModalCloseBtn = document.getElementById("warningmodal-close-btn");

  warningModalBtn.addEventListener("click", () => {
    warningModalContainer.style.display = "flex";
    warningModalEl.style.display = "flex";
  });

  warningModalCloseBtn.addEventListener("click", () => {
    warningModalContainer.style.display = "none";
    warningModalEl.style.display = "none";
  })
</script>

To use the Dark Modal component give the mdl-dark class to the modal element. Copy the code below to use it in your project. Make sure to include the JavaScript also.

              
              
<button class="button btn-solid-dark" id="dark-modal-btn">
  Dark Modal
</button>

<div class="modal__container" id="dark-modal-container">
  <section class="modal mdl__icons mdl-dark" id="dark-modal-el">
    <header class="modal__title">
      <h1 class="h-5">Modal Title</h1>
      <button 
        class="button btn-action btn-plain-icon modal__title--close"
        id="darkmodal-close-btn">
        <img 
          class="icon-light icon-lg button__icon"
          src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/close.svg"
          alt="close">
      </button>
    </header>
    <main class="modal__body">
      <p class="bd-5">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Omnis blanditiis, explicabo deleniti rerum.
      </p>
    </main>
    <footer class="modal__footer">
      <button class="button btn-solid-dark modal__footer--btn">
        ACTION 1
      </button>
      <button class="button btn-outline-dark modal__footer--btn">
        ACTION 2
      </button>
    </footer>
  </section>
</div>

<!-- JavaScript -->
<script async>
  const darkModalBtn = document.getElementById("dark-modal-btn");
  const darkModalContainer = document.getElementById("dark-modal-container");
  const darkModalEl = document.getElementById("dark-modal-el");
  const darkModalCloseBtn = document.getElementById("darkmodal-close-btn");

  darkModalBtn.addEventListener("click", () => {
    darkModalContainer.style.display = "flex";
    darkModalEl.style.display = "flex";
  });

  darkModalCloseBtn.addEventListener("click", () => {
    darkModalContainer.style.display = "none";
    darkModalEl.style.display = "none";
  })
</script>