0

我在这里有一个简单的应用程序（QandATable2.php），当用户单击加号按钮时，它将打开一个模式窗口并显示存储在另一个页面（previousquestions.php）中的详细信息。

现在我遇到的问题是，如果您在文本框为空白时立即单击“搜索”按钮，您将看到它在自己的页面上加载页面，并在该页面上显示详细信息。这是不正确的。

我想要它做的是，如果用户单击了搜索按钮，那么我希望将详细信息存储在模式窗口中，而不是存储在它自己的整个页面上。我听说最好的解决方案是使用 iframe。那么有谁知道如何使用 iframe 来实现这一点？

我使用的模态窗口被称为 SimpleModal，它的网站在这里

下面是 QandATable2.php 代码，它显示加号按钮并打开模式窗口，将模式窗口的内容链接到 previousquestions.php 页面：

<script type="text/javascript">          
    function plusbutton() { 
        // Display an external page using an iframe 
        var src = "previousquestions.php"; 
        $.modal('<iframe src="' + src + '" height="100%" width="100%" style="border:0">');
        return false;
    }   
    function closewindow() {     
        $.modal.close(); 
        return false;
    }         
</script>

<h1>CREATING QUESTIONS AND ANSWERS</h1>
<table id="plus" align="center">
    <tr>
        <th>
            <a onclick="return plusbutton();">
                <img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage"/>
            </a>
            <span id="plussignmsg">(Click Plus Sign to look <br/> up Previous Questions)</span>
        </th>
    </tr>
</table>

下面是 previousquestions.php 代码，它在模式窗口中显示详细信息以及存储搜索功能的位置：

<?php
    foreach (array('questioncontent') as $varname) {
        $questioncontent = (isset($_POST[$varname])) ? $_POST[$varname] : '';
    }
?>

<div id="previouslink">
    <button type="button" id="close" onclick="return closewindow();">Close</button>
    <h1>PREVIOUS QUESTIONS</h1>

    <p>Search for a previous question by entering in a phrase in the search box below and submitting the phrase</p>

    <form action="previousquestions.php" method="post">
          <p>Search: <input type="text" name="questioncontent" value="<?php echo $questioncontent; ?>" /></p>
          <p><input id="searchquestion" name="searchQuestion" type="submit" value="Search" /></p>
    </form>
</div>

<?php 
    //...connected to DB
    if (isset($_POST['searchQuestion'])) {
        $questionquery = "SELECT QuestionContent FROM Question
              WHERE(QuestionContent = '".mysql_real_escape_string($questioncontent)."')";
        if (empty($questioncontent)){
            echo "Please enter in a phrase in the text box in able to search for a question";
        }
?>
4

2 回答 2

2

取自示例：

// Display an external page using an iframe
var src = "http://365.ericmmartin.com/";
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
    closeHTML:"",
    containerCss:{
        backgroundColor:"#fff",
        borderColor:"#fff",
        height:450,
        padding:0,
        width:830
    },
    overlayClose:true
});

为了满足您的需求：

function plusbutton() {
    // Display an external page using an iframe
    var src = "previousquestions.php";
    $.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
        closeHTML:"",
        containerCss:{
            backgroundColor:"#fff",
            borderColor:"#fff",
            height:450,
            padding:0,
            width:830
        },
        overlayClose:true
    });
}

让表单像往常一样完成它的工作（这里没有事件处理程序），或者如果这不起作用，请尝试添加target="_self"表单的属性，这样可以确保页面在 iframe 内打开。

否则，我建议不要使用 iframe，而是使用 ajax 并将它们加载到普通的 div 中，但这取决于你。

更新：要在评论中回答您的问题：

问题 1：模态框设置为 100% 高度和 50% 宽度，所以我将 iframe 设置为相同，现在宽度是完美的，但 iframe 的高度没有下降到 100%。

尝试style="width:100%;height:100%;"代替width="100%" height="100%"（我认为将百分比值放入这些属性中是行不通的）

更新 2：似乎问题不在这里，但对于.simplemodel-data包含 iframe 的类，“hacky”解决方案是添加到您的 css: .somplemodel-data {height: 100%;}。检查文档以查看是否有关于此的“官方”内容。

问题2：我有一个关闭按钮，如果用户单击“关闭”按钮，它会关闭模态窗口，但现在它不会关闭模态窗口，它一直说它是未定义的。

关闭按钮将不起作用，因为该closewindow函数是在您从 iframe 内部调用它时在父窗口中定义的。要克服这个问题，您有 2 个解决方案： 1. 要么将关闭按钮放在 iframe 之外，其余部分保持原样 2. 要么调用父窗口的closewindow函数。

对于 1：$.modal('<button type="button" id="close" onclick="return closewindow();">Close</button><iframe src="' + src + '" style="border:0;width:100%;height:100%;">');在“QandATable.php”中

对于 2：<button type="button" id="close" onclick="return parent.closewindow();">Close</button>在“previousquestions.php”中（或者可能替换parent为top，我认为是一样的）

于 2012-05-24T12:13:00.327 回答
0

添加一个iframe带有 id ('iframe')previousquestions.php的文件并创建一个名为 eg 的新文件search.php，该文件接受一个 url 参数作为搜索字符串，并将您的 PHP 搜索代码放在那里。然后在您的表单上设置一个 javascript 事件处理程序

<form action="" onsubmit="javascript:document.getElementById('iframe').src =
  'search.php?q='+encodeURI(document.forms[0].questioncontent.value); return false;">
于 2012-05-24T11:35:34.523 回答