Question

我创建了两个模态窗口。首先是包含一些列表，并具有用于搜索的输入字段。我的想法是在下一个模态窗口显示搜索结果。如何在第一个模态中使用输入值并在第二个模态窗口的查询中运行？

<!--Modal cal list-->
<div id="modalCal" class="modal" role="dialog">
  <div class="modal-dialog" style="overflow-y: scroll; max-height: 85%;margin-top: 50px;margin-bottom: 50px;" >
    <!--Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h4 class="modal-title">Lista CAL-ova</h4>
        <input type="text" placeholder="cal x color" name="cal" id="cal" />
        <button class="btn" data-toggle="modal" href="#src">Pretraga</button>
      </div>
      <div class="modal-body">
        <?php
        $result = $objCal->ListCal();
        echo '<ul class="list-group">';
        while($row = mssql_fetch_array($result)) {
          echo '<li id="cals" class="list-group-item">'.$row['cal'].'</li>';
        }
        echo '</ul>';
        ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!--Modal cal list-->
<div id="src" class="modal" role="dialog">
  <div class="modal-dialog" style="overflow-y: scroll; max-height: 85%;margin-top: 50px;margin-bottom: 50px;" >
    <!--Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h4 class="modal-title">Lista CAL-ova</h4>
      <div class="modal-body">
        <?php
        $result = $objCal->FindCalByName('input from first modal');
        echo '<ul class="list-group">';
        while($row = mssql_fetch_array($result)) {
          echo '<li class="list-group-item">'.$row['cal'].'</li>';
        }
        echo '</ul>';
        ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

您创建文件modal2.php，如：

<?php $calName = $_GET['input_by_first_modal']; ?>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h4 class="modal-title">Lista CAL-ova</h4>
    <input type="text" placeholder="cal x color" name="cal" />
    <button class="btn" data-toggle="modal" href="#pretraga">Pretraga</button>
</div>
<div class="modal-body">
    <ul class="list-group">
    <?php
    $result = $objCal->FindCalByName($calName);
    while($row = mssql_fetch_array($result)) {
      echo '<li class="list-group-item">'.$row['cal'].'</li>';
    }
    ?>
    </ul>
 </div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

modal1页面中的JS应该是这样的

var $modal = $('#src');

$('#modalCal').on('click', '#your-ul > li', function(){
  var name = $(this).val();

  setTimeout(function(){
     $modal.load('modal2.php?input_by_first_modal='+name, '', function(){
      $modal.modal();
    });
  }, 1000);
});

Answer 2

感谢大家的帮助。我发现更好的解决方案而是打开两个模态窗口，用js我直接搜索ul li元素。

$(document).ready(function(){
$("#cal").keyup(function(){

    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val(), count = 0;

    // Loop through the comment list
    $("ul li").each(function(){

        // If the list item does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).fadeOut();

        } 
    });
});

}）;

bootstrap堆叠模态输入

2 个答案: