如何在Bootstrap 3中将数据传递到modal

How to pass data to modal in Bootstrap 3?

本文关键字：数据 modal Bootstrap 更新时间：2023-09-26

我尝试过将数据传递给一个模态，就像我自己网站上Bootstrap文档中的例子一样，但仍然不起作用？

我的第一个猜测是，它与includes或每个include的位置有关。

我不知道为什么它不起作用，所以我希望你能帮忙。

我的模态是通过按下表格行来启动的。它看起来像这样：

<tr data-toggle="modal" data-id="' . $trans['id'] . '" data-target="#transferModal">
    <td>' . $trans['id'] . '</td>
    <td>' . $trans['restaurant'] . '</td>
    <td>' . $trans['korer'] . '</td>
    <td>' . $trans['dato'] . '</td>
    <td>' . $trans['tillader'] . '</td>
  </tr>

我的模态看起来是这样的：

<div class="modal fade" id="transferModal" tabindex="-1" role="dialog" aria-labelledby="transferModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
    <div class="modal-body">
    <form>
      <div class="form-group">
        <label for="recipient-name" class="control-label">Recipient:</label>
        <input type="text" class="form-control" id="recipient-name">
      </div>
      <div class="form-group">
        <label for="message-text" class="control-label">Message:</label>
        <textarea class="form-control" id="message-text"></textarea>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Send message</button>
  </div>
</div>

这是控制data-id:的JavaScript

$('#transferModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('id') // Extract info from data-* attributes
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

当我单击表行时，模态将打开，但数据id不会插入任何位置。

包含的文件包括在列出的中（相同的顺序）

bootstrap.css//包含在头中
style.css//自己的css文件-包含在head中
jquery.min.js//最后包含在文件中
bootstrap.js//最后包含在文件中

您忽略了带有模态内容的脚本标记位于调用jQuery的脚本标记之上。

我想你可以试试，

id=$（event.relatedTarget）.attr（'data-id'），我在一个语气词中使用了它。

也许你可以试试我的答案，希望能有所帮助。

$(document).ready(function(){
  $(".thehide").hide();
  $(document).on("click", "table button", function(){
    $("#trigger_modal").trigger("click");
    $("#myModal .modal-title").html("COMPLETE INFO");
    $("#myModal .modal-body").html($("#partial_container").html());
    $('#myModal input[name="fullname"]').val($(this).closest("tr").find("td:nth-child(1)").text());
    $('#myModal input[name="age"]').val($(this).closest("tr").find("td:nth-child(2)").text());
    $('#myModal input[name="civil_status"]').val($(this).closest("tr").find("td:nth-child(3)").text());
    
  });
  
});

.thehide{display: none;}
.display_table{display: table;}
.center{margin-left: auto; margin-right: auto;}
.margin_zero{margin: 0px !important;}
.text_align_center{text-align: center;}
.text_align_left{text-align: left;}
.text_transform_uppercase{text-transform: uppercase;}
.divider{height: 15px; width: 100%; clear: both; float: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <th class="text_align_left text_transform_uppercase">Full Name</th>
      <th class="text_align_center text_transform_uppercase">Age</th>
      <th class="text_align_center text_transform_uppercase">Gender</th>
      <th class="text_align_center text_transform_uppercase">Civil Status</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text_align_left">Full Name 1</td>
      <td class="text_align_center">20</td>
      <td class="text_align_center">Single</td>
      <td>
        <div class="display_table center">
          <button class="btn btn-sucess">View</button>
        </div>
      </td>
    </tr>
    <tr>
      <td class="text_align_left">Full Name 2</td>
      <td class="text_align_center">15</td>
      <td class="text_align_center">Widow</td>
      <td>
        <div class="display_table center">
          <button class="btn btn-sucess">View</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<!-- Button trigger modal -->
<button type="button" id="trigger_modal" class="thehide btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body">
       
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- the partial container -->
<div class="thehide" id="partial_container">
  <form>
    <fieldset>
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <label>FULL NAME:</label>
              <input type="text" name="fullname" class="form-control" />
            </div>
          </div>
          <div class="col-sm-12">
            <div class="form-group">
              <label>AGE:</label>
              <input type="text" name="age" class="form-control" />
            </div>
          </div>
          <div class="col-sm-12">
            <div class="form-group">
              <label>CIVILS STATUS:</label>
              <input type="text" name="civil_status" class="form-control" />
            </div>
          </div>
        </div>
      </div>
    </fieldset>
    <div class="divider"></div>
    <div class="display_table center">
          <button class="btn btn-sucess">Save</button>
        </div>
  </form>
</div>