Divi theme - How can I make a button trigger a Javascript popup (Divi + ActiveCampaign)

RoyZohan
February 18, 2020
159 views
0 votes
2 Answers

I just got off support with ActiveCampaign and they said they couldn’t provide me with code examples on how to add their modal pop-up forms to be triggered by wordpress buttons.

I found a few resources online but they are all slightly different than the functionality I’m looking for.

I already added the ActiveCampaign plugin to my wordpress site and there are two options of embedding the form within the site.

shortcode “[activeCampaign formId=1]” or
<script src="https://exampledomain.com/f/embed.php?id=1" type="text/javascript" charset="utf-8"></script>

I’m currently using the divi theme, and the buttons have sections for CSS ID’s and CSS Classes.

so to summarize, I would like to be able to click a button and have the activecampaign modal form popup.

If you could show me how I can add code to the button and my site to trigger the modal popup that’d be amazing.

Let me know if you have any other information.

Thanks!

Answers

Sugesstion:

This involves DOM manipulation. create a css class called active which should be set to the form container to show. Here’s an example:

var formToggle = document.getElementById("form-toggler");

var formContainer = document.querySelector(".form-container");

formToggle.addEventListener('click', function(){
  // When you click the button, first check if the form is open
  //  so that you know if you should close or open
  if(formContainer.classList.contains("active")){
    // Form is currently open, because it has active as one of it's classes
    // so remove active to hide it.
    formContainer.classList.remove("active");
  }else{
    // Form is currently closed, because it does not have active as one of it's classes
    // so add active to show it.
    formContainer.classList.add("active");
  }
});

.form-container{
  width: 100%;
  height: 100%;
  min-height: 200px;
  background-color: rgba(0,0,0,0.2);
  display: none;
}

/* When form has active class, set display to block */
.form-container.active{
  display: block !important;
}

<div class="form-container">
    <!-- your Form Here -->
    <h1>Yey, form is active!!</h1>
</div>

<button id="form-toggler">OpenForm<button>

This is just at the basic level of approaching your scenario. So you’ve got to work on your css to make your Modal cover the entire window and add a close button on it in case someone decides to close it.

Hey this should work for you also. Bear in mind there is some extra code you probably wont need all of it such as the animations but I will leave these in as they make the modal look a little slicker. You won’t need bootstrap or any additional libraries for this code.

HTML:

<a id="gdx-lighbox-modal-unique-1" data-hover="true" type="button" class="gdx-lightbox-tooltip-open-modal lightbox-link gdx-lightbox-button" data-open="gdx-lighbox-modal-1">
Click Here
</a>

<div class="gdx-modal" id="gdx-lighbox-modal-1" data-animation="slideInOutLeft">
<div class="gdx-modal-dialog">
<header class="gdx-modal-header">   
<a class="gdx-close-modal" aria-label="close modal" data-close="">✕</a>  
</header>  
<section class="gdx-modal-content">
//Form would go here instead of the image (image just an example)
<img src="https://gdxdesigns.com/wp-content/uploads/2020/11/little-frog.jpg">  </section> 
<footer class="gdx-modal-footer"> <h3 class="gdx-modal-image-title"></h3></footer> 
</div> 
</div>

CSS:

/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
    --lightgray: #efefef;
    --blue: steelblue;
    --white: #fff;
    --black: rgba(0, 0, 0, 0.8);
    --bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.15);
  }

  * {
    padding: 0;
    margin: 0;
  }

  .gdx-body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font: 16px/1.5 sans-serif;
  }

  .lightbox-link, a.lightbox-link {
    cursor: pointer;
  margin-left: 2.5%;
  }

  .gdx-lightbox-tooltip-open-modal img {
      width: 20px;
      height: 20px;
  }

  .gdx-lightbox-button {
    padding: 10px 20px;
    background: #000;
    padding: 10px 20px;
    font-weight: normal;
    border: 2px solid #000;
    color: #94c93b;
  }

  .gdx-lightbox-button:hover {
    background: #FFF;
    color: #000;
  }

  /* MODAL
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .gdx-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--black);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: all 0.35s ease-in;
    z-index: 9999 !important;
  }

  .gdx-modal.is-visible {
    visibility: visible;
    opacity: 1;
  }

  .gdx-modal-dialog {
    position: relative;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 5px;
    background: var(--white);
    overflow: auto;
    cursor: default;
    margin-top: 5%;
  }

  .gdx-modal-dialog > * {
    padding: 1rem;
  }

  .gdx-modal-header,
  .gdx-modal-footer {
    background: #FFF;
  }

  .gdx-modal-header .gdx-close-modal {
    font-size: 1.5rem;
  }

  .gdx-modal-header a {
      font-size: 2em;
  }

  .gdx-modal-content {
      text-align: center;
  }

  .gdx-modal-content img {
    margin: 0 !important;
  }

  .gdx-close-modal {
      float: right;
      cursor: pointer;
  }

  .gdx-modal p + p {
    margin-top: 1rem;
  }

  .gdx-modal-image-title {
      text-align: center;
      font-size: 1em;
      margin: 0;
  }

  /* ANIMATIONS
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  [data-animation] .gdx-modal-dialog {
    opacity: 0;
    transition: all 0.5s var(--bounceEasing);
  }

  [data-animation].is-visible .gdx-modal-dialog {
    opacity: 1;
    transition-delay: 0.2s;
  }

  [data-animation="slideInOutDown"] .gdx-modal-dialog {
    transform: translateY(100%);
  }

  [data-animation="slideInOutTop"] .gdx-modal-dialog {
    transform: translateY(-100%);
  }

  [data-animation="slideInOutLeft"] .gdx-modal-dialog {
    transform: translateX(-100%);
  }

  [data-animation="slideInOutRight"] .gdx-modal-dialog {
    transform: translateX(100%);
  }

  [data-animation="zoomInOut"] .gdx-modal-dialog {
    transform: scale(0.2);
  }

  [data-animation="rotateInOutDown"] .gdx-modal-dialog {
    transform-origin: top left;
    transform: rotate(-1turn);
  }

  [data-animation="mixInAnimations"].is-visible .gdx-modal-dialog {
    animation: mixInAnimations 2s 0.2s linear forwards;
  }

  [data-animation="slideInOutDown"].is-visible .gdx-modal-dialog,
  [data-animation="slideInOutTop"].is-visible .gdx-modal-dialog,
  [data-animation="slideInOutLeft"].is-visible .gdx-modal-dialog,
  [data-animation="slideInOutRight"].is-visible .gdx-modal-dialog,
  [data-animation="zoomInOut"].is-visible .gdx-modal-dialog,
  [data-animation="rotateInOutDown"].is-visible .gdx-modal-dialog {
    transform: none;
  }

  @keyframes mixInAnimations {
    0% {
      transform: translateX(-100%);
    }

    10% {
      transform: translateX(0);
    }

    20% {
      transform: rotate(20deg);
    }

    30% {
      transform: rotate(-20deg);
    }

    40% {
      transform: rotate(15deg);
    }

    50% {
      transform: rotate(-15deg);
    }

    60% {
      transform: rotate(10deg);
    }

    70% {
      transform: rotate(-10deg);
    }

    80% {
      transform: rotate(5deg);
    }

    90% {
      transform: rotate(-5deg);
    }

    100% {
      transform: rotate(0deg);
    }
  }

  /* Backend Instructions
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.lightbox-instructions-heading {
    font-size: 1.8em !important;
}
.lightbox-instructions strong {
    font-size: 1.2em !important;
}
.gdx-lightbox-tooltip-open-modal img {
    margin: -0.3em;
    margin-left: 0.25em;
}
xmp {
    white-space: normal;
}
.lightbox-tooltip-instructions-content xmp{
    margin-bottom: 2em;
}

Javascript


    const openEls = document.querySelectorAll("[data-open]");
    const closeEls = document.querySelectorAll("[data-close]");
    const isVisible = "is-visible";

    for (const el of openEls) {
      el.addEventListener("click", function() {
        const modalId = this.dataset.open;
        document.getElementById(modalId).classList.add(isVisible);
      });
    }

    for (const el of closeEls) {
      el.addEventListener("click", function() {
        this.parentElement.parentElement.parentElement.classList.remove(isVisible);
      });
    }

    document.addEventListener("click", e => {
      if (e.target == document.querySelector(".gdx-modal.is-visible")) {
        document.querySelector(".gdx-modal.is-visible").classList.remove(isVisible);
      }
    });

    document.addEventListener("keyup", e => {
      // if we press the ESC
      if (e.key == "Escape" && document.querySelector(".gdx-modal.is-visible")) {
        document.querySelector(".gdx-modal.is-visible").classList.remove(isVisible);
      }
    });

JSFiddle Example can be seen here.

If you want to download this as a WordPress Plugin (free of course) you can do so here

If you want to see the a demo of the plugin in action with the button modal popup you see this here

Please signup or login to give your own answer.

Click here to cancel reply.

Divi theme – How can I make a button trigger a Javascript popup (Divi + ActiveCampaign)

Answers