Как заставить кнопку вызвать всплывающее окно Javascript (Divi + ActiveCampaign)

Question

Я только что прекратил поддержку ActiveCampaign, и они сказали, что не могут предоставить мне примеры кода о том, как добавить свои модальные всплывающие формы, которые запускаются кнопками wordpress.

Я нашел несколько ресурсов онлайн, но все они немного отличаются от функциональности, которую я ищу.

Я уже добавил плагин ActiveCampaign на свой сайт WordPress, и есть два варианта встраивания формы в сайт.

1. шорткод "[activeCampaign formId = 1]" или

2. <script src="https://exampledomain.com/f/embed.php?id=1" type="text/javascript" charset="utf-8"></script>

В настоящее время я использую тему divi, а кнопки имеют разделы для CSS идентификаторов и CSS Классы.

Подводя итог, я хотел бы иметь возможность щелкнуть по кнопке и получить всплывающее окно модальной формы activecampaign.

Если бы вы могли показать мне, как я могу добавить код к кнопке и мой сайт, чтобы вызвать модальное всплывающее окно, которое было бы удивительно.

Дайте мне знать, если у вас есть какая-либо другая информация.

Спасибо!

Answer 1

Sugesstion:

Это включает манипуляцию DOM. создайте css class с именем active, который должен быть установлен в контейнер формы для отображения. Вот пример:

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>

Это только на базовом c уровне подхода к вашему сценарию. Таким образом, вам нужно поработать над css, чтобы ваш Modal покрыл все окно и добавить на него кнопку закрытия, если кто-то решит закрыть его.