Question

我有自举模式形式，还有几个按钮，调用这个形式，如下所示：

<a href="javascript:void(0)" data-toggle="modal" data-target="#specialoffer">
    <button class="green full" id="button1">Ask Question</button>
</a>

我可以发送信息，哪个按钮切换模态形式到模态形式？我希望以我的形式拥有这样的东西：

<input type="hidden" name="caller" value="button1">

其中“button1”是按钮的id，用户按下以激活模态。

Answer 1

$('[type="button"]').click(function(e){
    var val = $(e.target).closest('button').attr('data-value');

  $('#myModal').find('input').val(val);
  $('#myModal').modal('show');
});

试试这个jsFiddle。这就是你需要的。

Answer 2

要触发模态窗口，您需要使用按钮或链接。

当您尝试通过单击按钮打开模式时，您可以收听show.bs.modal事件。

请试试这个：

$('.modal').on('show.bs.modal', function (e) {
    var trigger = $(e.relatedTarget);
    $('.modal').find('.modal-body').empty().append('<input type="text" value="'+trigger.attr('id')+'"/>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.css" rel="stylesheet"/>
<button type="button" id="button1" class="btn" data-toggle="modal" data-target="#myModal">Show Modal</button>

<button type="button" id="button2" class="btn" data-toggle="modal" data-target="#myModal">Show Modal2</button>

<button type="button" id="button3" class="btn" data-toggle="modal" data-target="#myModal">Show Modal3</button>

<!-- Modal -->
<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">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

哪个按钮切换bootstrap模态

2 个答案: