在弹出窗口/模式中显示来自 php 函数的搜索结果答案

【问题标题】：Display search results from php function in a popup/modal在弹出窗口/模式中显示来自 php 函数的搜索结果
【发布时间】：2020-12-16 22:22:58
【问题描述】：

我有一个搜索结果显示在我的主页上由 php 生成的表中。我想在弹出窗口/模式中而不是在页面上显示结果表。搜索工作正常，直到我将它放入模态，然后什么都没有弹出。我从 W3 学校拿了模态代码。非常感谢任何帮助或更好的方法来实现这一点。

<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;
 }

【问题讨论】：

使用 HTML、CSS 和 JavaScript 创建一个假窗口。使用XMLHttpRequest 和FormData 代替旧式表单提交，将数据放入假窗口。
var modal = document.getElementById("myModal"; 中有错字 - 缺少右括号 )。
@bpanatta - 不幸的是，这并没有解决问题，但感谢您指出我的语法错误。
@StackSlave - 我不熟悉 XMLHttpRequest。目前正在谷歌搜索，但我尝试使用浏览器窗口创建一个“假窗口”，但这并不是真正的弹出窗口。只是同一页面上的另一个窗口。
你必须熟悉XMLHttpRequest with FormData。

标签： javascript php html css

【解决方案1】：

我使用了这个网站上的一个插件，并根据我的需要对其进行了定制，它运行良好。

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

【讨论】：