Display search results from php function in a popup/modal

I have a search where the results are displayed in a table generated by php on my main page. I want to display the results table in a popup/modal instead of on the page. Search works fine until I put it in the modal and then nothing pops up. I took the modal code from W3 schools. Any assistance or a better way to achieve this is much appreciated.

<div id="myModal" class="modal" name="officese">
    <form action="" method="Post">
        <label>Office Search:</label><br>
        <input type="text" name="search" size="8">
        <input id="popup" type="submit" name="submit">
    </form>
    <div class="modal-content">
        <span class="close">&times;</span>
        <?php 
        include 'testing.php';
        $key=$_POST['search'];
        if(isset($_POST['submit'])){
            $new_search=dir_search($key);
        }
        ?>
    </div>
</div>

<script>
var modal = document.getElementById("myModal";
var btn = document.getElementById("popup");
var span = document.getElementByClassName("close")[0];
btn.onclick = function(){
    modal.style.display = "block";
}
span.onclick = function(){
    modal.style.display = "none";
}
window.onclick = function(event){
    if(event.target == modal){
        modal.style.display = "none";
    }
}
</script>

CSS:

.modal {
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 */
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}

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

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

Answer

i used a plugin from this website and tailored it to my needs and it is working perfectly.

https://www.jqueryscript.net/lightbox/jQuery-Multi-Purpose-Popup-Modal-Plugin-popModal.html

Advertisement

Answer