javascript - 将 ID 传递给 Bootstrap 模式？

Question

我正在使用来自 this site 的 squarespaceModal

我想知道是否可以将 id 传递给模态代码？这是调用模式的按钮:

<div class="center">
    <button id="<?php echo $i; ?>" data-toggle="modal" data-target="#squarespaceModal" class="update_pro btn btn-primary center-block">
        update
    </button>
</div>

这是模态的第一行:

<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">

Answer 1

那只是一个标准Bootstrap Modal我看不出有什么特别之处。因此，您拥有所有 events你想从模态。

因此您“可以”编写一个事件以在每次打开模式时捕获。

$(function() {
   $('#myModal').on('shown.bs.modal', function() {
    alert($(this).attr('id'))
   });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>

<button id="myButton" data-target="#myModal" data-toggle="modal" class="btn btn-primary">Open</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="myModal">
  <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="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        This is my modal body
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->