【问题标题】:Show results in popup在弹出窗口中显示结果
【发布时间】:2016-02-08 09:41:59
【问题描述】:

这段代码可以很好地在页面本身上显示结果,但我想在弹出窗口中显示结果。

我们已将代码链接到数据库,它正在检索预期的结果,但我如何使用 jQuery 在弹出窗口或对话框中显示除法?它也应该是响应式的。

      <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>PHP, jQuery search demo</title><link rel="stylesheet" type="text/css" href="my.css"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript">$(function() {

$(".search_button").click(function() {
    // getting the value that user typed
    var searchString    = $("#search_box").val();
    // forming the queryString
    var data            = 'search='+ searchString;

    // if searchString is not empty
    if(searchString) {
        // ajax call
        $.ajax({
            type: "POST",
            url: "do_search.php",
            data: data,
            beforeSend: function(html) { // this happens before actual call
                $("#results").html(''); 
                $("#searchresults").show();
                $(".word").html(searchString);
           },
           success: function(html){ // this happens after we get results
                $("#results").show();
                $("#results").append(html);
          }
        });    
    }
    return false;});});</script></head><body><div id="container"><div style="margin:20px auto; text-align: center;"><form method="post" action="do_search.php"><input type="text" name="search" id="search_box" class='search_box'/><input type="submit" value="Search" class="search_button" /><br /></form></div><div><div id="searchresults">Search results :</div><ul id="results" class="update"></ul></div></div></body></html>

【问题讨论】:

    标签: php jquery sql ajax popup


    【解决方案1】:

    使用 jQuery Dialogue,您可以完全实现您想要的。

    使用 jQuery 对话,您可以

    • 为您的对话框设置动画,使其外观漂亮
    • 您可以使用它来简单地显示一条消息
    • 您可以使用它来显示表单,例如插入表单或“联系我们”表单
    • 您可以将其用作确认框

    易于使用和风格化。

    Read about it here

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-10-01
      • 1970-01-01
      • 1970-01-01
      • 2020-07-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-12-14
      相关资源
      最近更新 更多