我这里有一个简单的应用程序(QandATable2.php),当用户单击加号按钮时,它将打开一个模态窗口,并显示存储在另一个页面中的详细信息(previousquestions.php)。
现在我遇到的问题是,如果您在文本框为空白时立即单击"搜索"按钮,您将看到它将页面加载到自己的页面上,并在该页面上显示详细信息。这是不正确的。
我希望它做的是,如果用户单击了搜索按钮,那么我希望详细信息存储在模态窗口中,而不是存储在其自己的整个页面上。我听说最好的解决方案是使用iframe。那么有谁知道如何使用 iframe 实现这一点?
我正在使用的模态窗口被称为SimpleModal,它的网站在这里
下面是 QandATable2.php 代码,其中显示加号按钮并打开模态窗口,将模态窗口的内容链接到上一个问题.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>
下面是前面的问题.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";
}
?>
以下示例:
// 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 并将它们加载到普通的div 中,而不是 iframe,但这取决于你。
更新:要在评论中回答您的问题:
问题 1:模态框设置为 100% 高度和 50% 宽度,所以我设置 iframe相同,现在宽度是完美的,但iframe的Hieght没有 下降到 100%。
尝试style="width:100%;height:100%;"
而不是width="100%" height="100%"
(我认为在这些属性中放置百分比值是行不通的)
更新2:似乎问题不在这里,但是对于包含iframe的.simplemodel-data
类,一个"hacky"解决方案是添加到您的css中:.somplemodel-data {height: 100%;}
。检查文档,看看是否有"官方"的东西。
问题 2:我有一个关闭按钮,如果用户单击 "关闭"按钮,它会关闭模式窗口,但现在它不会关闭 模态窗口,它一直声明它是未定义的。
关闭按钮将不起作用,因为当您从 iframe 内部调用 closewindow
函数时,它是在父窗口中定义的。要克服这个问题,您有 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>
在"以前的问题.php"中(或者可能用top
替换parent
,我认为是一样的)
添加一个带有id('iframe')的iframe
previousquestions.php
并创建一个名为例如 search.php
接受一个 url 参数作为搜索字符串并将您的 PHP 搜索代码放在那里。然后在表单上设置一个 javascript 事件处理程序
<form action="" onsubmit="javascript:document.getElementById('iframe').src =
'search.php?q='+encodeURI(document.forms[0].questioncontent.value); return false;">