Modal with AJAX

Effortlessly Retrieve Content with XMLHttpRequest

Load Popup Content Automatically with AJAX

Efficient Content Loading with AJAX Use XMLHttpRequest to Get Content for Your Modal

The application function responsible for retrieving content from a different page. The option is triggered by changing its value to the URL from which we want to retrieve resources. The functionality retrieves the content using the XMLHttpRequest object, searching for the element declared in the ajax option on the ajax page, indicated by the ajaxTarget property, and then places it in the content of our modal. It sounds complicated, but in practice it is very simple. As an example, let's load the first p element from the main page:

<div class="modal-demo-content">
  <button class="modal-box-open modal-demo-button">Show modal</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().options({
    open: ".modal-box-open",
    ajax: "https://compsoul.dev/",
    ajaxTarget: "p"
  }).init();
</script>

Upon clicking the "Display Modal" button, we can observe the following action: a full-screen modal is opened, then the content of the page with the address declared in the ajax property is loaded. The loaded content is then searched in order to retrieve the first HTML element, declared as the value of the ajaxTarget property. The obtained element is placed inside our modal. In addition to changing the instance settings, the content from another page can be loaded by editing the element used to start the application. Let's look at the following example:

<div class="modal-demo-content">
  <button data-element="p" data-url="https://compsoul.dev/" class="modal-box-data modal-demo-button">Show modal</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().options({
    open: ".modal-box-data"
  }).init();
</script>

By using data attributes, we can easily load multiple modals using only one instance:

<div class="modal-demo-content">
  <button class="modal-box-dataset modal-demo-button" data-element="p" data-url="https://compsoul.dev/">Load the p element</button>
  <button class="modal-box-dataset modal-demo-button" data-element="h2" data-url="https://compsoul.dev/">Load the h2 element</button>
  <button class="modal-box-dataset modal-demo-button" data-element="h3" data-url="https://compsoul.dev/">Load the h3 element</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().options({
    open: ".modal-box-dataset"
  }).init();
</script>

As you can see, each instance of the module loads different content thanks to the data-element attribute. We can also change the URLs of the pages from which the content is loaded by editing the data-url attribute. We encourage you to test the functionality along with the other settings. If you have any doubts, questions, or suggestions, please feel free to comment on the post.

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.