2015-11-07 139 views
1

此代碼工作正常,在頁面本身顯示結果,但我想在彈出窗口中顯示結果。在彈出窗口中顯示結果

我們已將代碼鏈接到數據庫,它正在檢索預期的結果,但是如何使用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> 

回答

2

使用jQuery對話,你可以完成你想要的東西。

使用jQuery的對話,你可以

  • 動畫的對話框給它一個漂亮的外觀
  • 你可以用它來簡單地顯示一個消息
  • 你可以用它來顯示的形式,如插入表格或「聯繫我們」的形式
  • 你可以使用它作爲一個確認框

易於使用和風格。

Read about it here

編碼快樂!