Im working on a modal popup plugin project. the basic premise is to create a plugin that allows a user to create a popup/modal that is displayed on the front end.
i have managed to create said plugin and allow a user to create multiple popups, which will display on the homepage if "active" is selected.
the next step of this project is to open the popup when the user clicks a button on the front end for example, a user clicks a button that says "contact us" and a form popup will appear. of course that is dependant on what a user creates as a popup.
i dont really have any idea of where to start with this, my original idea was to create a randomly generated class name, which a user can add to any button they want but i couldn't come up with any way to search the DOM to find the button with that class, let alone run the PHP function that displays the modal. any ideas?
code used to display modal below.
function display_modal(){
if( is_front_page() ){
?>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<?php
$homepage_modal = new WP_Query(array(
'posts_per_page' => -1,
'post_type' => 'Modal',
));
while($homepage_modal->have_posts()){
$homepage_modal->the_post();
$post_id = get_the_ID();
$active_modal = get_post_meta($post_id, 'active_modal', true);
if($active_modal == "Yes"){ ?>
<div class="popup" id="popup">
<div class="modal-content">
<span class="fa-solid fa-xmark close" id="close"></span>
<?php echo the_content(); ?>
</div>
</div>
<?php
}
}
}
}
add_filter('wp_footer', 'display_modal');