Bootstrap - 模态框只显示第一项

Question

我正在使用 Bootstrap 来设计这个网页。此页面包含一个 table，我在其中使用 modal 来显示有关所选项目的更多详细信息。

我的问题是 table 上的所有按钮仅重定向到第一项的第一个详细信息。我在想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 - 模态框只显示第一项

Bootstrap - Modal only shows the first item

php

loops

twitter-bootstrap