Question

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

Answer 2

在按钮上单击将需要值设置为模态的输入字段，然后使用下面的代码显示模态。

$(".update_pro").click(function () {
    $('#txtYourTexbBoxWithinModal').val($(this).data('id')); // or something eslse.
    $('#squarespaceModal').modal('show');
});

如果遇到显示模态的问题，请删除

数据目标= “＃squarespaceModal”

Cheeerssss

Answer 3

您可以使用解决方案https://jsfiddle.net/32jsq6aL/

＆＃13;

$('button[data-toggle="modal"]').click(function(){
  $($(this).data('target')).attr('btn-id', $(this).attr('id'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center"> 
  <button id="test 1" 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">

</div>

＆＃13;

OnClick上的

button，获取data-target并将btn-id作为button id附加到目标modal。

希望这会对你有所帮助。

将ID传递给bootstrap模式？

3 个答案: