Hi,

I'm trying to display the Filters in a pop up instead of above the table.

I'm doing it in the following way: Custom CSS, javascript on the page, and html structure in the functions.php. But it doesn't work. Can you help me with it?

The code is below.

CSS 

/* Style for the Popup */
#filterPopup {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Popup Content */
.filter-popup-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Style for the Button to open the popup */
#filterButton {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    margin: 10px 0;
    border: none;
    cursor: pointer;
}

#filterButton:hover {
    background-color: #45a049;
}

/* Show the popup when the 'show' class is added */
#filterPopup.show {
    display: block;
}

JS

<script>

document.addEventListener('DOMContentLoaded', function() {
    var filterButton = document.getElementById('filterButton');
    var filterPopup = document.getElementById('filterPopup');
    var closeButton = document.getElementsByClassName('close')[0];

    filterButton.onclick = function() {
        filterPopup.classList.add('show');
    }

    closeButton.onclick = function() {
        filterPopup.classList.remove('show');
    }
});

</script>

HTML structure in functions.php

function add_my_custom_popup() {
    ?>
    <!-- Button to open the popup -->
    <button id="filterButton">Open Filters</button>

    <!-- The Popup -->
    <div id="filterPopup" class="filter-popup">
        <div class="filter-popup-content">
            <span class="close">×</span>

        </div>
    </div>
    <?php
}
add_action('wp_footer', 'add_my_custom_popup');

Your thoughts and input would be be much appreciated.