如何在模式窗口中显示内容 - How to display content within modal window?

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

现在我遇到的问题是，如果您在文本框为空白时立即单击"搜索"按钮，您将看到它将页面加载到自己的页面上，显示要输入的搜索短语的消息，它还显示以前从模态窗口进入该页面的所有功能。这是不正确的。

我希望它做的是，如果用户单击了搜索按钮，那么当它发布表单并输出消息时，它会在模态窗口中进行，而不是在自己的整个页面上。那么有谁知道如何做到这一点呢？

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

下面是 QandATable2.php 代码，其中显示加号按钮并打开模态窗口，将模态窗口的内容链接到上一个问题.php页面：

<script type="text/javascript">
  function plusbutton()
    {
    $.modal( $('<div />').load('previousquestions.php #previouslink') );            
    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";
    }
          ?>

你可能想使用AJAX，因为你已经在使用jQuery，你只需要这样的东西：

// override the "default" form submitting behavior with a callback function
$("form").submit(
    // this is the callback function for your form submit function.
    function(e)
    {
        // this prevents the page from reloading -- very important!
        e.preventDefault(); 
        // get the search data from the input textbox
        var s = $("input[name='questioncontent']").val();
        // see annotation
        $("#simplemodal-data").html("loading...")
           .load("previousquestions.php #previouslink", 
               { 
                   questioncontent : s,
                   searchQuestion : "Search"
               }
            );
    }); // end submit wrapper

这会将值发送到服务器，并将其加载到div 中，ID simplemodal-data

注解：

代码中的最后一行执行多项操作。首先，它将简单模式 DIV 替换为"加载"消息。同时，它会向您以前的问题.php页面发出 POST 请求。这部分{ questioncontent : s, searchQuestion : "Search"}是表单中的数据被传递到 PHP 页面的地方，（记住上面的变量 var s 赋值。最后，来自上一个问题.php页面的结果应该加载到简单模态数据模态窗口中。

缺少的一件事是在加载方法中添加 #previousquestions，以便只有一部分HTML文档入到模态中。将整个 HTML 页面加载到另一个 HTML 文档中从来都不是一个好主意，"加载"旨在允许您只选择要插入的文档部分，即 DIV。

我在 php 文件名后添加了"#previouslink"。这就是魔术发生的地方。浏览器知道从PHP文件中提取该DIV，并在页面上仅插入该部分，没有<head> <body>或任何不需要的标记。

您可以通过使用

AJAX 提交表单来实现所需的内容，而不是使用页面使用新内容重新加载的默认行为。您不能使用 modal.load，因为您需要在请求中 POST 数据才能获得适当的响应。

但是，在使用 AJAX 发布数据时，可以将响应作为 HTML 并将该 HTML 添加到页面上的 DIV 中，然后在该 DIV 容器上调用 SimpleModal 命令。

首先，修改表单上的提交按钮，使其类型="按钮"而不是类型="提交"。这将阻止表单提交和重定向页面。或者，您可以添加 event.preventDefault（）;并将 false 返回到表单提交单击处理程序（请参阅第二步），但在进行更改时尝试此方法可能更容易：

第 1 步：

<!-- change type to button -->
<input id="searchquestion" name="searchQuestion" type="button" value="Search" />

第 2 步：

为表单按钮创建一个处理程序，该处理程序使用 serializeArray 将表单序列化为字符串，然后将其 POST 到服务器。在成功回调处理程序中，你将采用 HTML 响应，并将模式窗口中的内容替换为新的 HTML。这还会捕获错误（如果有），并提醒它们并将其写入控制台：

$('form[type="button"]').click(function() {
  var dataString = $('form').serializeArray();
  $.ajax({
    url: "/previousquestions.php?t="+new Date().getTime(),
    type: "POST",
    data: dataString,           
    context: document.body,
    success: function(data){ 
   alert(data); // results from server, either the HTML page, or JSON/XML
       $('simplemodal-data').html(data);  // if HTML, just insert into div#results
    },
    error: function(jqXHR, textStatus, errorThrown) {
    if(window.location.hostname == "localhost") {
        alert("Error submitting the form :: " + textStatus + " : " + errorThrown);                        
    }
    console.error("Error submitting the form :: " + textStatus + " : " + errorThrown);
    }
  });
});

第 3 步：

最后，请确保您的previousquestions.php代码仅返回部分 HTML 文档，而不是完整的 HTML 文档。由于您将 HTML 注入到现有页面中，因此不需要<html>、<head>或<body>部分。这些只会导致您的网页无法验证，并可能导致旧版浏览器中出现不良行为。下面是您的响应的示例：

<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="test" /></p>
      <p><input id="searchquestion" name="searchQuestion" type="submit" value="Search" /></p>
      </form>
</div>

     <p>
         Your Search: 'test'     </p>

      <p>Number of Questions Shown from the Search: <strong>0</strong></p><p>Sorry, No Questions were found from this Search</p>

我从另一个页面上的类似问题的答案中发现，就像Bergi所说的那样，使用iframe比使用ajax更容易将内容显示在模态窗口中。因此，这个问题的最佳答案在下面，它显示了如何将iframe用于上述问题：

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