Bootstrap - Modal只顯示第一項

Question

我正在使用Bootstrap來設計此網頁。此頁面包含一個表格，我使用modal來顯示有關所選項目的更多詳細信息。

我的問題是，表上的所有按鈕只重定向到第一項的第一個細節。我正在考慮id名稱並將其設置爲數組，但它不起作用（或者我做錯了）。

下面是一個示例代碼，給你一個想法：

<?php 
(loop){ 

$itemtopic=$loop['item']; 
$data=$loop['data']; 

?> 

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="float:right; margin-left:5px;" title="New User"><?php echo $itemtopic; ?></button> 

      <!-- Modal --> 
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
       <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
        <h4 class="modal-title" id="myModalLabel">Create New User</h4> 
        </div> 
        <div class="modal-body"> 
        <?php echo $data; ?> 
        </div> 
        <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 
       </div> 
       </div> 
      </div> 

<?php 
} /* END OF LOOP */ 
?> 

我怎麼能顯示出與所選擇的項目對應的數據不只是第一項的第一細節？

Answer 1

你不必循環模態的元素，你需要的是顯示模式的改變之前的數據。請嘗試下面的代碼：

<script> 
//Please visit http://www.nokiflores.com 
    $(document).ready(
    function() { 
     $("button.btn").click( 
      function(e) { 
      var parent_div = $(this).closes("div"); 
      var val = $(parent_div).find("input[name=data]").val(); 
      $("#modal_body").html(val); 
       $("#myModal").modal(); 
      }); 
    }); 

}); 

    </script> 

<?php $_data = array(); $_data[] = array('id'=>1,'data'=>"data1", 'item'=>"item1"); $_data[] = array('id'=>2,'data'=>"data2", 'item'=>"item1"); ?> 

<?php foreach($_data as $data) { ?> 

<div class="data"> 

<input type="hidden" value="<?php echo $data['data'] ; ?>" name="data" /> 

<!--please notice that i remove the modal functions in this button--> 
    <button class="btn btn-primary" id="<?php echo $data['id'] ; ?>" style="float:right; margin-left:5px;" title="New User"><?php echo $data['item'] ; ?></button> 

</div> 

<?php } ?> 



      <!-- Modal --> 
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
       <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
        <h4 class="modal-title" id="myModalLabel">Create New User</h4> 
        </div> 
        <div id="modal_body" class="modal-body"> 

        </div> 
        <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 
       </div> 
       </div> 
      </div> 

Answer 2

@登錄Wayne，對於你是否在做這件事，它有點含糊不清，所以你能否確認你是否用X模塊打印X按鈕，並且他們每對都有匹配的唯一ID？

例如：

<?php 
$rows = array('1'=>"afasdf",'2'=>"fagagadfg"); 

foreach($rows as $key=>$data): 
?> 
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal<?php echo $key;?>" style="float:right; margin-left:5px;" title="New User">Create New User</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title" id="myModalLabel">Create New User</h4> 
     </div> 
     <div class="modal-body"> 
     <?php echo $data; ?> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 
<?php 
endforeach; 
?> 

的關鍵是唯一的ID，否則ofcourse它會查找並顯示第一個模式標題#myModal。

如果您使用ajax替換每個負載上的內容，那麼您只能使用1個模式，其中發佈了您正在做的事情，並且看起來似乎並不需要，除非由於此循環而真正實現了大量的html打印，在這種情況下無論如何，分頁將是合理的下一步。

：）