Question

我正在使用bootstrap模式来显示成员的信息。每个成员都有按钮来打开模态。循环中有这个按钮：

@foreach($members as $member)
    <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">View Details</button>
@endforeach

此模态内容：

<div id="myModal" class="modal fade" role="dialog">
     <div class="modal-dialog">

                    <!-- Modal content-->
          <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">Member Detail Information</h4>
             </div>

             <div class="modal-body">
                  {{$member->name}}
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             </div>
   </div>

但每次我得到最后一位会员的信息。这很明显但我想从按钮传递$member->ID并在模态中显示它们各自的细节。我怎么能实现这个目标呢？

Answer 1

您可以使用data属性将一些数据传递到Bootstrap模式。

循环中的按钮

@foreach()

     <a data-toggle="modal" data-id="{{$member->name}}" href="#UserDialog" class="user_dialog">Details</a>

@endforeach

Bootstrap模型

<div class="modal hide" id="UserDialog">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
    <div class="modal-body">
        <p>some content</p>
        <input type="text" name="user_name" id="user_name" value=""/>
    </div>
</div>

小JavaScript

$(document).on("click", ".user_dialog", function () {
     var UserName = $(this).data('id');
     $(".modal-body #user_name").val( UserName );
});

那是

这里的小演示：http://jsfiddle.net/Au9tc/6247/

如何将id传递给bootstrap模式？

1 个答案: