Question

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

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

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

我使用的模态窗口称为SimpleModal，它的网站是here

下面是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";
        }
?>

Answer 1

取自the examples：

// 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中打开。

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

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

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

尝试使用style="width:100%;height:100%;"代替width="100%" height="100%"（我认为将百分比值放在这些属性中不起作用）

更新2 ：似乎问题不在这里，但是对于包含iframe的.simplemodel-data类，“hacky”解决方案是添加到您的css：{{1 }}。检查文档，看看是否有“正式”的内容。

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

关闭按钮不起作用，因为在您从iframe内部调用时，父窗口中定义了.somplemodel-data {height: 100%;}功能。要克服这个问题，你有2个解决方案 1.将关闭按钮放在iframe外面并保持其余部分不变 2.或者你调用父窗口的closewindow函数。

对于“QandATable.php”中的1：closewindow

对于2：$.modal('<button type="button" id="close" onclick="return closewindow();">Close</button><iframe src="' + src + '" style="border:0;width:100%;height:100%;">');在“previousquestions.php”中（或者可以用<button type="button" id="close" onclick="return parent.closewindow();">Close</button>替换parent，我认为它是相同的）

Answer 2

向iframe添加一个带有ID（'iframe'）的previousquestions.php，并创建一个名为“{1}”的新文件search.php接受一个url参数作为搜索字符串，并将PHP搜索代码放在那里。然后在表单上设置一个javascript事件处理程序

<form action="" onsubmit="javascript:document.getElementById('iframe').src =
  'search.php?q='+encodeURI(document.forms[0].questioncontent.value); return false;">

如何使用iframe在模态窗口中显示内容？

2 个答案: