Modal for Divi Code Module

index.html

<button class="at-modal__button at-modal__button--primary" data-modal-action="open" data-modal-target="modal-1" type="button">Open Modal</button>

<div class="at-modal" data-modal="modal-1">
  <header class="at-modal__header">Are you sure you want to leave?</header>
  <section class="at-modal__section">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cave putes quicquam esse verius. Nos commodius agimus. Hic ambiguo ludimur. Cur post Tarentum ad Archytam? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et ille ridens: Video, inquit, quid agas; Atque his de rebus et splendida est eorum et illustris oratio. Duo Reges: constructio interrete.
  </section>
  <footer class="at-modal__footer">
    <a class="at-modal__button" data-modal-action="close" href="#close">Close</a>
    <a class="at-modal__button at-modal__button--primary" href="https://andytran.me">Leave</a>
  </footer>
</div>

scripts.js

jQuery('.at-modal__button[data-modal-action="open"]').on('click', function(e) {
  e.preventDefault();
  
  jQuery('.at-modal[data-modal="' + jQuery(this).attr('data-modal-target') + '"]').show();
});

jQuery('.at-modal__button[data-modal-action="close"]').on('click', function(e) {
  e.preventDefault();
  
  jQuery(this).closest('.at-modal').hide();
});

style.css

.at-modal {
  z-index: 999999;
  position: fixed;
  top: 50%;
  left: 50%;
  display: none;
  width: 90%;
  max-width: 600px;
  background: #FFFFFF;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.2);
}
.at-modal__header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  color: #404040;
  font-size: 16px;
  font-weight: 600;
  line-height: 60px;
}
.at-modal__section {
  padding: 20px;
  line-height: 26px;
  font-size: 14px;
}
.at-modal__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 10px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.at-modal__footer .at-modal__button {
  margin: 0 5px;
}
.at-modal__footer .at-modal__button:last-child {
  margin-right: 0;
}
.at-modal__button {
  display: inline-block;
  background: #FFFFFF;
  height: 36px;
  border: 0;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  color: #404040;
  line-height: 36px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.at-modal__button--primary {
  background: #0080FF;
  color: #FFFFFF;
}