Question

当我在搜索框中输入任何关键字时，我从mysql数据库中获取了记录。到目前为止，一切运行正常，并显示该特定关键字的结果。我的查询是获取的结果将显示在搜索框下方，而不是我应该在弹出窗口上显示结果，弹出窗口也应该响应。 PLZ建议我，以下是代码

index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="pt" dir="ltr"><head><link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="font-awesome-4.3.0/css/font-awesome.min.css">
<!-- JQUERY FROM GOOGLE API -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
  $(function() {
    $("#lets_search").bind('submit',function() {
      var value = $('#str').val();
       $.post('db_query.php',{value:value}, function(data){
         $("#search_results").html(data);
       });
       return false;
    });
  });
</script></head>  <body>

<div style="text-align:center;">
  <form id="lets_search" action="" >
    Search:<input type="text" name="str" id="str">
    <input type="submit" value="send" name="send" id="send">
  </form>
  <div id="search_results"></div>
</div></body></html>

db_query.php

<?php $con=mysqli_connect("localhost","root", "","u871197953_shope") or die("Error connecting to database: ".mysql_error()); mysqli_select_db($con,"u871197953_shope") or die(mysql_error()); $query = mysqli_query($con,"select feed_product_image,feed_product_name,price,deeplink,image from wp_pc_products_merchants e,wp_pc_products w where e.slug=w.id_merchant and feed_product_name LIKE '%".$_POST['value']."%' LIMIT 20");   if(mysqli_num_rows($query) > 0)
    {
    ?>
    <div class="input-group col-sm-10  modal-box"  id="popup" title="Search Results" style="text-align:center;margin-top:10px;">
          <table class="table table-hover" style="text-align:center;">
            <thead>
                 <tr bgcolor="#1E90FF" >
                          <th>Products</th>
                          <th style="text-align:center;">Details</th>
                          <th>Retailers</th>
                          <th>Price</th>
                          <th>Buy</th>
                 </tr>
            </thead>
            <tbody>
            <?php 
            while($results = mysqli_fetch_array($query))
            { ?>
                  <tr>
                     <td><img src = "<?php  echo $results['feed_product_image'];  ?>"  style="object-fit:contain;height:60px;width:80px;" /></td>
                     <td><?php  echo "<p style='font-size:12px;'>".$results['feed_product_name']. "</p>" ; ?></td>
                     <td><img src = "<?php  echo $results['image'];  ?>"  style="background-size:contain;height:30px;width:100px;"  /></td>
                     <td><?php echo '<i class="fa fa-inr">&nbsp;'.$results['price']. '</i>'.".00" ;   ?></td>
                     <td><a href="<?php  echo $results['deeplink'];  ?>" style="background-color:#ff8c21;" class="btn btn-warning btn-sm">Buy now</a></td>
                 </tr>
            <?php 
            }
            ?>
            </tbody>
          </table>
        <?php
    }
    else
    { // if there is no matching rows do following
        echo "No results found...";
    } ?>

Answer 1

默认情况下，bootstrap popup / modal窗口是响应式的。别担心。

在你的页面中添加模态窗口html代码。

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

加载结果后，将结果添加到模型主体

中

$（＆＃39; #myModal .modal-body＆＃39;）。html（data）;

然后使用：

触发模型

$（＆＃39;＃myModal＆＃39）的模态（选项）;

- Use standard bootstrap options in the modal function.

搜索结果将显示在响应式弹出窗口中

1 个答案: