Как отобразить всплывающую форму по нажатию кнопки в WordPress?

Question

[Dioksin]

Исследующую существующий код сайта, сделанного в WordPress. Есть вот такая кнопка

<button class="button is-primary is-large showModal" name="button" type="button">Посмотреть ознакомительное видео с упражнениями</button>

По нажатию на эту кнопку показывается всплывающая форма. Код формы находится в php файле (используется плагин Contact Form)

<div class="modal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">Запись на консультацию</p>
            <button class="delete" aria-label="close"><i class="far fa-times-circle"></i></button>
        </header>
        <section class="modal-card-body">
            <?php echo do_shortcode('[contact-form-7 id="281" title="Контактная форма 1"]'); ?>
        </section>
        <footer class="modal-card-foot">
        </footer>
    </div>
</div>

Не могу разобраться каким образом код кнопки из HTML файла связывается из кода формы из php файла? Задача состоит в отображении ещё одной формы по нажатии на кнопку. Форму и кнопку сделал по аналогии с кодом выше, а вот как их связать вместе?

P.S. Плагинов FancyBox, PopupMaker нет. После установки плагина FancyBox, код выше перестал работать. При нажатии на кнопку форма перестала отображаться. Снёс плагин - работает. :)

Comments

[Антон Литвиненко]

Где-то в скриптах используя класс showModal открывается форма. И очевидно что завязано на одну форму точнее на один попап с классом modal

[Dioksin]

Антон Литвиненко, спасибо за подсказку. Наверное, это делает вот это код

jQuery(document).ready(function($){
	$(".showModal").click(function() {
        $(".modal").addClass("is-active");
    });

    $(".delete, .modal-background").click(function() {
        $(".modal").removeClass("is-active");
    });

	if($(window).outerWidth() > 1024) {
		$('.cst-menu__item.main-menu__item.menu-item-has-children').hover( function() {
			$(this).find('.sub-menu.menu-depth-1').addClass('visible');
		}, function() {
			$(this).find('.sub-menu.menu-depth-1').removeClass('visible');
		});
	}
    

	if ("ontouchstart" in document.documentElement) {
		console.log('touch device');
		$('.cst-menu__item.main-menu__item.menu-item-has-children').click(function(e){
			e.stopPropagation();
			if( $(this).find('.sub-menu.menu-depth-1').hasClass('visible') ) {
				$(this).find('.sub-menu.menu-depth-1').removeClass('visible');
			} else {
				$(this).find('.sub-menu.menu-depth-1').addClass('visible');
			}
		});

		$('.cst-menu__item.main-menu__item.menu-item-has-children').hover(function(){
			return false;
		},function(){
			return false;
		});

		$('.sub-menu-toggler').click(function(e){
			e.stopPropagation();
			$(this).siblings('.menu-in-menu:not(menu-depth-1)').slideToggle(300);
			$(this).toggleClass('active');
		});

	} else {
		console.log('not touch device');
	}


	if($(window).outerWidth() < 1024 && "ontouchstart" in document.documentElement) {
		/*$('.sub-menu-toggler').click(function(e){
			e.stopPropagation();
			$(this).siblings('.menu-in-menu:not(menu-depth-1)').slideToggle(300);
			$(this).toggleClass('active');
		});*/
	} else {
		$('.cst-menu__item.sub-menu__item.menu-item-has-children .sub-menu-toggler').click(function(e){
			e.preventDefault();
			$(this).siblings('.menu-in-menu:not(.menu-depth-1)').slideToggle(300);
			$(this).toggleClass('active');
		});
	}

	$('.cst-reviews-slider').flickity({
		adaptiveHeight: true,
		cellAlign: 'left',
		wrapAround:false,
		prevNextButtons: false,
		pageDots: false,
		groupCells: '100%'
	});

	$('.cst-reviews-slider-navs .arrow.prev').click(function(){
		$('.cst-reviews-slider').flickity('previous');
	});

	$('.cst-reviews-slider-navs .arrow.next').click(function(){
		$('.cst-reviews-slider').flickity('next');
	});

	$('.sertificate-slider').flickity({
		adaptiveHeight: false,
		cellAlign: 'left',
		wrapAround:false,
		prevNextButtons: false,
		pageDots: false
	});

	$('.sertificate-slider-navs .arrow.prev').click(function(){
		$('.sertificate-slider').flickity('previous');
	});

	$('.sertificate-slider-navs .arrow.next').click(function(){
		$('.sertificate-slider').flickity('next');
	});

	$('.mobileMenu__close').click(function(e){
		$('.mobileMenu').toggleClass('active');
	});
});

Не подскажите, как мне привязать к этому коду отображение ещё одной формы? Я здесь вижу, что вначале метода проделываются некие манипуляции с классом showModal, но я не понимаю, где вызывается php код для создания формы?

Answer 1

[Антон Литвиненко]

Dioksin, за модалку отвечает только этот код

$(".showModal").click(function() {
  $(".modal").addClass("is-active");
});

$(".delete, .modal-background").click(function() {
  $(".modal").removeClass("is-active");
});

и по сути он ничего не делает кроме как добавляет класс для открытия модалки и удаляет этот класс если кликнуть на оверлей или кнопку закрытия

а код модалки вы сами написали, он уже есть, в него только функцией

<?php echo do_shortcode('[contact-form-7 id="281" title="Контактная форма 1"]'); ?>

выводится форма из CF7

<div class="modal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">Запись на консультацию</p>
            <button class="delete" aria-label="close"><i class="far fa-times-circle"></i></button>
        </header>
        <section class="modal-card-body">
            <?php echo do_shortcode('[contact-form-7 id="281" title="Контактная форма 1"]'); ?>
        </section>
        <footer class="modal-card-foot">
        </footer>
    </div>
</div>

закрытие модалки универсально переписать просто

$(".delete, .modal-background").click(function() {
  $(this).parents(".modal").removeClass("is-active");
});

а вот открытие нужно либо брать по дата атрибуту, либо если вам нужно только еще одну модалку добавить, то проще продублировать код както так

$(".showModal2").click(function() {
  $(".modal.modal2").addClass("is-active");
});

у второй кнопки заменить showModal на showModal2, добавить разметку второй модалки под первой и eй добавить класс modal2, так как на класс modal скорее всего привязаны стили