Modal Popup Window

Learn how to create a customizable popup window on your web page

Creating a Modal Popup Window with HTML, CSS, and JS

The Benefits of Using a Modal Popup Window Enhancing the User Experience on Your Web Page

A modal, specifically a modal window, is commonly referred to as a "pop-up window" that displays a technical message or loads content from another page. The purpose of this module is to display the panel while blocking the execution of any other operations on the page. After performing a previously defined action, the panel is closed. The application I created has the following features:

  • CSS3 animations
  • Loading content using XMLHttpRequest
  • Creating HTML structure
  • Loading a list of modules from different URL addresses
  • A mode that allows to optionally perform an age verification message or cookies files
  • Launching the module based on a variable embedded in the URL
  • Optional blocking of the page scroll bar
  • Blocking the possibility of running multiple modules at the same time
  • Automatic closing of the module

The modal has a range of settings. Some of them change the characteristics of the application's operation, allowing one application to be used as several different modules on a page. The article you are currently reading and the direct sub-pages comprehensively explain all settings and how to use the application on the WWW. Additionally, we provide the possibility of paying for the implementation of the module after an earlier estimation. If, however, you want to implement the module independently, you will receive all the help you need by leaving a comment in the section below the post.

<div class="modal-demo-content">
  <button class="modal-demo-button modal-clone">Copy subtitle</button>
  <button class="modal-demo-button modal-data" data-element="p" data-url="https://compsoul.dev/">Show modal</button>
  <button class="modal-demo-button modal-dataset" data-element=".link-phone-text" data-url="https://compsoul.dev/">Load phone</button>
  <button class="modal-demo-button modal-dataset" data-element=".link-email-text" data-url="https://compsoul.dev/">Load email</button>
  <button class="modal-demo-button modal-dataset" data-element="h2" data-url="https://compsoul.dev/">Load h2</button>
  <button class="modal-demo-button modal-dataset" data-element="h3" data-url="https://compsoul.dev/">Load h3</button>
</div>
.compsoul-modal-container {
  background: #000000BF;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 0.4s;
  will-change: opacity;
  z-index: 6;
}

.compsoul-modal-container.modal-active {
  opacity: 1;
  pointer-events: auto;
}

.compsoul-modal-container.modal-close {
  pointer-events: auto;
}

.modal-unset, .modal-unset:before, .modal-unset:after, .compsoul-modal-container.modal-unset, .compsoul-modal-main.modal-unset {
  animation: unset !important;
  transition: none !important;
}

.compsoul-modal-container:before {
  animation: compsoul-modal-loading 1s infinite;
  border-bottom: 0.5em solid #ffffff00;
  border-left: 0.5em solid #ffffff;
  border-right: 0.5em solid #ffffff;
  border-top: 0.5em solid #ffffff00;
  border-radius: 100%;
  box-sizing: content-box;
  content: "";
  font-size: 4px;
  height: 6em;
  left: 50%;
  opacity: 1;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.4s;
  will-change: opacity;
  width: 6em;
}

.compsoul-modal-container.modal-ready:before, .compsoul-modal-container.modal-error:before {
  animation-play-state: paused;
  opacity: 0;
}

@keyframes compsoul-modal-loading {
  from {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }

  to {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

.compsoul-modal-container:after {
  color: #ffffff;
  content: "\26A0";
  font-size: 42px;
  font-weight: 200;
  left: 50%;
  margin: -6px 0 0 0;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.4s;
  will-change: opacity;
}

.compsoul-modal-container.modal-error:after {
  opacity: 1;
}

.compsoul-modal-main {
  left: 50%;
  max-height: calc(2 * 40vh);
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, calc(-50% - 100px), 0);
  transition: transform 0.4s 0.4s, opacity 0.4s 0.4s;
  width: 800px;
  z-index: 1;
  will-change: transform, opacity;
}

.modal-ready.modal-active .compsoul-modal-main {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0);
}

.modal-change .compsoul-modal-main {
  transition: transform 0.4s, opacity 0.4s;
}

.compsoul-modal-main:before {
  background: #fff;
  border-radius: 8px;
  bottom: -32px;
  box-shadow: 0 5px 26px 0 rgba(0, 0, 0, 0.22), 0 20px 28px 0 rgba(0, 0, 0, 0.30);
  content: "";
  left: -32px;
  position: absolute;
  right: -32px;
  top: -32px;
  z-index: -1;
}

.compsoul-modal-content {
  background: #fff;
  line-height: 1.2;
  overflow-y: auto;
  max-height: calc(2 * 40vh);
  padding: 0 32px 0 0;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.compsoul-modal-content:after {
  content: "";
  display: table;
  clear: both;
}

.compsoul-modal-close {
  right: 8em;
  position: absolute;
  top: 8em;
  z-index: 2;
}

.compsoul-modal-next {
  right: 8em;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  z-index: 2;
}

.compsoul-modal-prev {
  left: 8em;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  z-index: 2;
}

.compsoul-modal-close, .compsoul-modal-next, .compsoul-modal-prev {
  background: #000000;
  border: none;
  cursor: default;
  font-size: 2.6px;
  height: 16em;
  opacity: 0;
  outline: 1px solid #e7a14f00;
  padding: 0;
  text-align: center;
  transition: opacity 0.4s, outline 0.4s;
  width: 16em;
}

.compsoul-modal-close:focus, .compsoul-modal-close:focus-within, .compsoul-modal-next:focus, .compsoul-modal-next:focus-within, .compsoul-modal-prev:focus, .compsoul-modal-prev:focus-within {
  outline: 1px solid #e7a14fff;
}

.compsoul-modal-close, .compsoul-modal-next.modal-active, .compsoul-modal-prev.modal-active {
  cursor: pointer;
  opacity: 1;
}

.compsoul-modal-close:before, .compsoul-modal-close:after, .compsoul-modal-next:before, .compsoul-modal-prev:before {
  border-top: 1em solid #ffffff;
  border-right: 1em solid #ffffff;
  box-sizing: content-box;
  content: "";
  cursor: pointer;
  display: inline-block;
  height: 4em;
  padding: 0 0 1em 1em;
  transform: rotate(45deg) translate3d(-25%, 25%, 0);
  transition: opacity 0.4s, border 0.4s;
  width: 4em;
}

.compsoul-modal-close:before, .compsoul-modal-close:after {
  height: 3em;
  width: 3em;
}

.compsoul-modal-close:hover:before, .compsoul-modal-close:hover:after, .compsoul-modal-next:hover:before, .compsoul-modal-prev:hover:before {
  border-top: 1em solid #e7a14f;
  border-right: 1em solid #e7a14f;
}

.compsoul-modal-close:after, .compsoul-modal-prev:before {
  transform: rotate(-135deg) translate3d(-25%, 25%, 0);
}

.compsoul-modal-close:before {
  transform: rotate(45deg) translate3d(-7%, 7%, 0);
}

.compsoul-modal-close:after {
  transform: rotate(-135deg) translate3d(-7%, 7%, 0);
}

.compsoul-modal-timer {
  height: 3px;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 5;
  width: 100%;
}

.compsoul-modal-timer:before {
  animation: compsoul-slide-timeline 8s linear forwards;
  animation-play-state: paused;
  background: #e7a14f;
  content: "";
  display: block;
  height: 100%;
  transform: translate3d(-100%, 0, 0);
  width: 100%;
}

.modal-ready .compsoul-modal-timer:before {
  animation-play-state: running;
}

.compsoul-modal-container:hover .compsoul-modal-timer:before {
  animation-play-state: paused;
}

@keyframes compsoul-slide-timeline {
  from {
    transform: translate3d(-100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@media only screen and (max-width: 1060px) {
  .compsoul-modal-main {
    width: calc(100% - 94px);
  }

  .compsoul-modal-main:before {
    bottom: -12px;
    left: -12px;
    right: -12px;
    top: -12px;
  }

  .compsoul-modal-close, .compsoul-modal-next, .compsoul-modal-prev {
    font-size: 2px;
  }

  .compsoul-modal-close {
    right: 0;
    top: 0;
  }

  .compsoul-modal-next {
    right: 0;
  }

  .compsoul-modal-prev {
    left: 0;
  }
}

.modal-box {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: block;
  font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
  height: 0;
  margin: 32px auto;
  overflow: hidden;
  transition: height 0.4s;
  width: 264px;
}

.modal-box.modal-active {
  height: 180px;
}

.modal-box-content {
  padding: 24px 32px;
}

.modal-box-open {
  margin: 21px auto;
}
<script src="https://compsoul.dev/uploads/js/compsoul.js"></script><script src="https://compsoul.dev/uploads/js/modal.js"></script><script>
  new Modal("#modal").options({
    open: ".modal-clone",
    clone: ".header-content p"
  }).init();

  new Modal().options({
    open: ".modal-data"
  }).init();

  new Modal().options({
    open: ".modal-dataset",
    slider: ".modal-dataset"
  }).init();
</script>

Installation

The module installation process is as follows:

  1. Install the Compsoul library
  2. Install the Modal module
  3. Instance with settings
  4. CSS code
  5. HTML code

Due to the asynchrony of the module, it requires running through a server for proper functioning. Running the module directly from the disk in the browser is not possible for security reasons.

JS

Installing JavaScript on the website involves downloading files, copying the code responsible for importing files, and declaring an instance. Keep in mind that the script requires a server for proper functioning. You can freely edit the instance settings and the module file itself.

Installing the Compsoul Library

Installation Instructions:

  • Click on the link to download the library: Compsoul Library
  • Save the file to a specific location and add its path to the src attribute of the <script> tag. It's important to pay close attention to the file path to avoid common installation errors.
  • Place the <script> tag just before the closing body tag.

Example Code:

    <!-- Page content -->
    <script src="[YOUR PATH HERE]/compsoul.js"></script>
    <script src="[YOUR PATH HERE]/[YOUR MODULE FILE HERE]"></script>
    <script>
      new Example(".example").init();
    </script>
  </body>
</html>

Installing the Modal Module

  • Download the module by clicking on this link.
  • Save the file in a specified location and then include it in the src attribute of the <script> tag. It's very common for the file path to be set incorrectly during installation, so pay special attention to this point.
  • Place the <script> tag right after the previously added Compsoul library.

To import the class required for the module to work properly, you need to include the appropriate file (click to download) in your code. The file is imported using the <script> tag, to which you must set the appropriate src attribute pointing to the file (click to download). Here is an example of the correct installation of the module for files located in the main directory of the website (remember to set the correct paths for the downloaded files):

    <!-- Page content -->
    <script src="[YOUR PATH]/compsoul.js"></script>
    <script src="[YOUR PATH]/modal.js"></script>
    <script>
      new Modal("#id").options().init();
    </script>
  </body>
</html>

Modal Module Instance

Below are all possible modal settings. I tried to give them names corresponding to their purpose. The next pages of the entry (the menu on the left side of the screen or in the bottom right corner) present the settings in detail with all possible options and their description.

    <!-- Content -->
    <script src="compsoul.js"></script>
    <script src="modal.js"></script>
    <script>
      new Modal("#default").options({
        classActive: "modal-active",
        classReady: "modal-ready",
        classClose: "modal-close",
        classClosing: "modal-closing",
        classError: "modal-error",
        classOverflow: "modal-overflow",
        classUnset: "modal-unset",
        classAnimation: "modal-animation",
        classChange: "modal-change",

        selector: selector,

        id: false,
        class: false,

        elementContainer: ".compsoul-modal-container",
        elementMain: ".compsoul-modal-main",
        elementContent: ".compsoul-modal-content",
        elementTimer: ".compsoul-modal-timer",
        elementClose: ".compsoul-modal-close",
        elementPrev: ".compsoul-modal-prev",
        elementNext: ".compsoul-modal-next",

        build: true,
        popup: true,
        each: false,

        parent: false,

        ajax: false,
        ajaxTarget: selector,

        dom: false,

        clone: false,

        ready: false,

        open: false,
        openEvent: "click",
        openDelegation: true,
        openPrevent: true,

        storage: false,
        storageAgreement: false,
        storageEvent: "click",

        slider: false,
        sliderLoop: false,
        sliderEvent: "click",
        sliderDelay: 400,

        hash: true,
        hashLocation: false,

        overflow: true,

        close: true,
        closeElement: false,
        closeElementEvent: "click",
        closeSelf: true,
        closeEvent: "click",
        closeDelegation: true,
        closeDelay: 400,
        closeAuto: false,
        closeAutoEvent: "animationend",

        responsive: {
          400: {
            close: false
          },
          800: {
            close: true
          },
          1300: {
            close: false
          }
        }
      }).init();
    </script>
  </body>
</html>

CSS

The appearance of the module can be changed using CSS styles. The style sheet has been divided into two styles: one responsible for appearance and the other for functionality. The styles have been constructed in a way that does not cause conflicts with popular CSS libraries. The code below should be pasted into your stylesheet anywhere.

.compsoul-modal-container {
  background: #000000BF;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 0.4s;
  will-change: opacity;
  z-index: 6;
}

.compsoul-modal-container.modal-active {
  opacity: 1;
  pointer-events: auto;
}

.compsoul-modal-container.modal-close {
  pointer-events: auto;
}

.modal-unset, .modal-unset:before, .modal-unset:after, .compsoul-modal-container.modal-unset, .compsoul-modal-main.modal-unset {
  animation: unset !important;
  transition: none !important;
}

.compsoul-modal-container:before {
  animation: compsoul-modal-loading 1s infinite;
  border-bottom: 0.5em solid #ffffff00;
  border-left: 0.5em solid #ffffff;
  border-right: 0.5em solid #ffffff;
  border-top: 0.5em solid #ffffff00;
  border-radius: 100%;
  box-sizing: content-box;
  content: "";
  font-size: 4px;
  height: 6em;
  left: 50%;
  opacity: 1;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.4s;
  will-change: opacity;
  width: 6em;
}

.compsoul-modal-container.modal-ready:before, .compsoul-modal-container.modal-error:before {
  animation-play-state: paused;
  opacity: 0;
}

@keyframes compsoul-modal-loading {
  from {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }

  to {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

.compsoul-modal-container:after {
  color: #ffffff;
  content: "\26A0";
  font-size: 42px;
  font-weight: 200;
  left: 50%;
  margin: -6px 0 0 0;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.4s;
  will-change: opacity;
}

.compsoul-modal-container.modal-error:after {
  opacity: 1;
}

.compsoul-modal-main {
  left: 50%;
  max-height: calc(2 * 40vh);
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, calc(-50% - 100px), 0);
  transition: transform 0.4s 0.4s, opacity 0.4s 0.4s;
  width: 800px;
  z-index: 1;
  will-change: transform, opacity;
}

.modal-ready.modal-active .compsoul-modal-main {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0);
}

.modal-change .compsoul-modal-main {
  transition: transform 0.4s, opacity 0.4s;
}

.compsoul-modal-main:before {
  background: #fff;
  border-radius: 8px;
  bottom: -32px;
  box-shadow: 0 5px 26px 0 rgba(0, 0, 0, 0.22), 0 20px 28px 0 rgba(0, 0, 0, 0.30);
  content: "";
  left: -32px;
  position: absolute;
  right: -32px;
  top: -32px;
  z-index: -1;
}

.compsoul-modal-content {
  background: #fff;
  line-height: 1.2;
  overflow-y: auto;
  max-height: calc(2 * 40vh);
  padding: 0 32px 0 0;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.compsoul-modal-content:after {
  content: "";
  display: table;
  clear: both;
}

.compsoul-modal-close {
  right: 8em;
  position: absolute;
  top: 8em;
  z-index: 2;
}

.compsoul-modal-next {
  right: 8em;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  z-index: 2;
}

.compsoul-modal-prev {
  left: 8em;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  z-index: 2;
}

.compsoul-modal-close, .compsoul-modal-next, .compsoul-modal-prev {
  background: #000000;
  border: none;
  cursor: default;
  font-size: 2.6px;
  height: 16em;
  opacity: 0;
  outline: 1px solid #e7a14f00;
  padding: 0;
  text-align: center;
  transition: opacity 0.4s, outline 0.4s;
  width: 16em;
}

.compsoul-modal-close:focus, .compsoul-modal-close:focus-within, .compsoul-modal-next:focus, .compsoul-modal-next:focus-within, .compsoul-modal-prev:focus, .compsoul-modal-prev:focus-within {
  outline: 1px solid #e7a14fff;
}

.compsoul-modal-close, .compsoul-modal-next.modal-active, .compsoul-modal-prev.modal-active {
  cursor: pointer;
  opacity: 1;
}

.compsoul-modal-close:before, .compsoul-modal-close:after, .compsoul-modal-next:before, .compsoul-modal-prev:before {
  border-top: 1em solid #ffffff;
  border-right: 1em solid #ffffff;
  box-sizing: content-box;
  content: "";
  cursor: pointer;
  display: inline-block;
  height: 4em;
  padding: 0 0 1em 1em;
  transform: rotate(45deg) translate3d(-25%, 25%, 0);
  transition: opacity 0.4s, border 0.4s;
  width: 4em;
}

.compsoul-modal-close:before, .compsoul-modal-close:after {
  height: 3em;
  width: 3em;
}

.compsoul-modal-close:hover:before, .compsoul-modal-close:hover:after, .compsoul-modal-next:hover:before, .compsoul-modal-prev:hover:before {
  border-top: 1em solid #e7a14f;
  border-right: 1em solid #e7a14f;
}

.compsoul-modal-close:after, .compsoul-modal-prev:before {
  transform: rotate(-135deg) translate3d(-25%, 25%, 0);
}

.compsoul-modal-close:before {
  transform: rotate(45deg) translate3d(-7%, 7%, 0);
}

.compsoul-modal-close:after {
  transform: rotate(-135deg) translate3d(-7%, 7%, 0);
}

.compsoul-modal-timer {
  height: 3px;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 5;
  width: 100%;
}

.compsoul-modal-timer:before {
  animation: compsoul-slide-timeline 8s linear forwards;
  animation-play-state: paused;
  background: #e7a14f;
  content: "";
  display: block;
  height: 100%;
  transform: translate3d(-100%, 0, 0);
  width: 100%;
}

.modal-ready .compsoul-modal-timer:before {
  animation-play-state: running;
}

.compsoul-modal-container:hover .compsoul-modal-timer:before {
  animation-play-state: paused;
}

@keyframes compsoul-slide-timeline {
  from {
    transform: translate3d(-100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@media only screen and (max-width: 1060px) {
  .compsoul-modal-main {
    width: calc(100% - 94px);
  }

  .compsoul-modal-main:before {
    bottom: -12px;
    left: -12px;
    right: -12px;
    top: -12px;
  }

  .compsoul-modal-close, .compsoul-modal-next, .compsoul-modal-prev {
    font-size: 2px;
  }

  .compsoul-modal-close {
    right: 0;
    top: 0;
  }

  .compsoul-modal-next {
    right: 0;
  }

  .compsoul-modal-prev {
    left: 0;
  }
}

.modal-box {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: block;
  font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
  height: 0;
  margin: 32px auto;
  overflow: hidden;
  transition: height 0.4s;
  width: 264px;
}

.modal-box.modal-active {
  height: 180px;
}

.modal-box-content {
  padding: 24px 32px;
}

.modal-box-open {
  margin: 21px auto;
}

HTML

The module does not have its own HTML code placed on the page. It is mainly based on elements obtained from the DOM tree. To present the module's capabilities, I placed as a demo a few popular examples. You can learn more about the application's capabilities from the sub-pages of this entry (menu on the left side of the screen or in the lower right corner).

Demo

The demo version of the module contains sample usage of the application. A detailed description of the settings can be found on the pages of the entry (menu on the left side of the screen or in the lower right corner).

<div class="modal-demo-content">
  <button class="modal-demo-button modal-clone">Copy subtitle</button>
  <button class="modal-demo-button modal-data" data-element="p" data-url="https://compsoul.dev/">Show modal</button>
  <button class="modal-demo-button modal-dataset" data-element=".link-phone-text" data-url="https://compsoul.dev/">Load phone</button>
  <button class="modal-demo-button modal-dataset" data-element=".link-email-text" data-url="https://compsoul.dev/">Load email</button>
  <button class="modal-demo-button modal-dataset" data-element="h2" data-url="https://compsoul.dev/">Load h2</button>
  <button class="modal-demo-button modal-dataset" data-element="h3" data-url="https://compsoul.dev/">Load h3</button>
</div>
.compsoul-modal-container {
  background: #000000BF;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 0.4s;
  will-change: opacity;
  z-index: 6;
}

.compsoul-modal-container.modal-active {
  opacity: 1;
  pointer-events: auto;
}

.compsoul-modal-container.modal-close {
  pointer-events: auto;
}

.modal-unset, .modal-unset:before, .modal-unset:after, .compsoul-modal-container.modal-unset, .compsoul-modal-main.modal-unset {
  animation: unset !important;
  transition: none !important;
}

.compsoul-modal-container:before {
  animation: compsoul-modal-loading 1s infinite;
  border-bottom: 0.5em solid #ffffff00;
  border-left: 0.5em solid #ffffff;
  border-right: 0.5em solid #ffffff;
  border-top: 0.5em solid #ffffff00;
  border-radius: 100%;
  box-sizing: content-box;
  content: "";
  font-size: 4px;
  height: 6em;
  left: 50%;
  opacity: 1;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.4s;
  will-change: opacity;
  width: 6em;
}

.compsoul-modal-container.modal-ready:before, .compsoul-modal-container.modal-error:before {
  animation-play-state: paused;
  opacity: 0;
}

@keyframes compsoul-modal-loading {
  from {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }

  to {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

.compsoul-modal-container:after {
  color: #ffffff;
  content: "\26A0";
  font-size: 42px;
  font-weight: 200;
  left: 50%;
  margin: -6px 0 0 0;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.4s;
  will-change: opacity;
}

.compsoul-modal-container.modal-error:after {
  opacity: 1;
}

.compsoul-modal-main {
  left: 50%;
  max-height: calc(2 * 40vh);
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, calc(-50% - 100px), 0);
  transition: transform 0.4s 0.4s, opacity 0.4s 0.4s;
  width: 800px;
  z-index: 1;
  will-change: transform, opacity;
}

.modal-ready.modal-active .compsoul-modal-main {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0);
}

.modal-change .compsoul-modal-main {
  transition: transform 0.4s, opacity 0.4s;
}

.compsoul-modal-main:before {
  background: #fff;
  border-radius: 8px;
  bottom: -32px;
  box-shadow: 0 5px 26px 0 rgba(0, 0, 0, 0.22), 0 20px 28px 0 rgba(0, 0, 0, 0.30);
  content: "";
  left: -32px;
  position: absolute;
  right: -32px;
  top: -32px;
  z-index: -1;
}

.compsoul-modal-content {
  background: #fff;
  line-height: 1.2;
  overflow-y: auto;
  max-height: calc(2 * 40vh);
  padding: 0 32px 0 0;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.compsoul-modal-content:after {
  content: "";
  display: table;
  clear: both;
}

.compsoul-modal-close {
  right: 8em;
  position: absolute;
  top: 8em;
  z-index: 2;
}

.compsoul-modal-next {
  right: 8em;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  z-index: 2;
}

.compsoul-modal-prev {
  left: 8em;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  z-index: 2;
}

.compsoul-modal-close, .compsoul-modal-next, .compsoul-modal-prev {
  background: #000000;
  border: none;
  cursor: default;
  font-size: 2.6px;
  height: 16em;
  opacity: 0;
  outline: 1px solid #e7a14f00;
  padding: 0;
  text-align: center;
  transition: opacity 0.4s, outline 0.4s;
  width: 16em;
}

.compsoul-modal-close:focus, .compsoul-modal-close:focus-within, .compsoul-modal-next:focus, .compsoul-modal-next:focus-within, .compsoul-modal-prev:focus, .compsoul-modal-prev:focus-within {
  outline: 1px solid #e7a14fff;
}

.compsoul-modal-close, .compsoul-modal-next.modal-active, .compsoul-modal-prev.modal-active {
  cursor: pointer;
  opacity: 1;
}

.compsoul-modal-close:before, .compsoul-modal-close:after, .compsoul-modal-next:before, .compsoul-modal-prev:before {
  border-top: 1em solid #ffffff;
  border-right: 1em solid #ffffff;
  box-sizing: content-box;
  content: "";
  cursor: pointer;
  display: inline-block;
  height: 4em;
  padding: 0 0 1em 1em;
  transform: rotate(45deg) translate3d(-25%, 25%, 0);
  transition: opacity 0.4s, border 0.4s;
  width: 4em;
}

.compsoul-modal-close:before, .compsoul-modal-close:after {
  height: 3em;
  width: 3em;
}

.compsoul-modal-close:hover:before, .compsoul-modal-close:hover:after, .compsoul-modal-next:hover:before, .compsoul-modal-prev:hover:before {
  border-top: 1em solid #e7a14f;
  border-right: 1em solid #e7a14f;
}

.compsoul-modal-close:after, .compsoul-modal-prev:before {
  transform: rotate(-135deg) translate3d(-25%, 25%, 0);
}

.compsoul-modal-close:before {
  transform: rotate(45deg) translate3d(-7%, 7%, 0);
}

.compsoul-modal-close:after {
  transform: rotate(-135deg) translate3d(-7%, 7%, 0);
}

.compsoul-modal-timer {
  height: 3px;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 5;
  width: 100%;
}

.compsoul-modal-timer:before {
  animation: compsoul-slide-timeline 8s linear forwards;
  animation-play-state: paused;
  background: #e7a14f;
  content: "";
  display: block;
  height: 100%;
  transform: translate3d(-100%, 0, 0);
  width: 100%;
}

.modal-ready .compsoul-modal-timer:before {
  animation-play-state: running;
}

.compsoul-modal-container:hover .compsoul-modal-timer:before {
  animation-play-state: paused;
}

@keyframes compsoul-slide-timeline {
  from {
    transform: translate3d(-100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@media only screen and (max-width: 1060px) {
  .compsoul-modal-main {
    width: calc(100% - 94px);
  }

  .compsoul-modal-main:before {
    bottom: -12px;
    left: -12px;
    right: -12px;
    top: -12px;
  }

  .compsoul-modal-close, .compsoul-modal-next, .compsoul-modal-prev {
    font-size: 2px;
  }

  .compsoul-modal-close {
    right: 0;
    top: 0;
  }

  .compsoul-modal-next {
    right: 0;
  }

  .compsoul-modal-prev {
    left: 0;
  }
}

.modal-box {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: block;
  font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
  height: 0;
  margin: 32px auto;
  overflow: hidden;
  transition: height 0.4s;
  width: 264px;
}

.modal-box.modal-active {
  height: 180px;
}

.modal-box-content {
  padding: 24px 32px;
}

.modal-box-open {
  margin: 21px auto;
}
<script src="https://compsoul.dev/uploads/js/compsoul.js"></script><script src="https://compsoul.dev/uploads/js/modal.js"></script><script>
  new Modal("#modal").options({
    open: ".modal-clone",
    clone: ".header-content p"
  }).init();

  new Modal().options({
    open: ".modal-data"
  }).init();

  new Modal().options({
    open: ".modal-dataset",
    slider: ".modal-dataset"
  }).init();
</script>

Thank You for Reading

We hope you enjoyed this post! If you did, please consider following us on Facebook and leaving a like and a comment. If you have any questions or need assistance, feel free to use our contact form or email us at daniel@compsoul.dev. For urgent inquiries, you can reach us by phone at +48 732 846 416.