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

@Logon 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，否则它会找到并显示第一个模态标题#myModal。

如果你使用ajax来替换每个加载上的内容，你只能使用1个模态，除了你因为这个循环而真的有大量的html打印之外，你需要做什么并且真的不需要，在这种情况下，分页无论如何，这将是合乎逻辑的下一步。

：）

Answer 2

您不必循环模态元素，您需要的是在显示模态之前更改数据。请尝试以下代码：

<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>

Bootstrap - Modal仅显示第一项

2 个答案: