javascript - 将变量传递到 Bootstrap 模态中

Question

我能够将变量传递到模态底部的 bootstrap 3 模态，其中显示 id="callId"但如何将 callID 传递到我有 $test = callId 的模态。

<a data-id="<?=$sid?>" data-conf="<?=$call_conf?>" class="open-AddCallDialog btn btn-success btn-xs" href="#addCallDialog">Call Borrower</a>

jquery 脚本

$(document).on("click", ".open-AddCallDialog", function (e) {

    e.preventDefault();

    var _self = $(this);

    var myCallId = _self.data('id');
    $("#callId").val(myCallId);

    $(_self.attr('href')).modal('show');
});

模态

<div class="modal fade" id="addCallDialog"> tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Call Borrower</h4>
      </div>
      <div class="modal-body">
      <div class="row well">
       $test = call_conf;



      </div>
      </div>
       <div class="modal-footer">
        <input name="id" id="callId" type="hidden" value=""/> 
        <input name="pid" type="hidden" value="<?php echo $pid;?>"/>
        <input name="processtp" type="hidden" value="callborrower"/>
        <button id="submit" class="btn btn-primary btn-block btn-xs center">Update</button>
      </div>
      </form>
      </div>

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->

Answer 1

创建/销毁 Bootstrap 模式时会触发一些事件。

您需要的是 shown.bs.modal，一旦显示模式并且所有 CSS3 动画完成，就会触发它。通过 Hook 此事件，您可以将数据添加到模式的 DOM 结构中。

$(document).on('click', '.openAddCallDialog', function(event)
{
    var _self = $(this),
        id = _self.data('id'),
        conf = _self.data('conf'),
        modalEl = $(_self.attr('href'));

    modalEl.modal('show').one('shown.bs.modal', function(event)
    {            
        // This function body is the modal shown event callback
        // You can do anything in this function to modify the DOM
        // within the shown modal.

        var modal = $(this);

        modal.find('#callId').val(callId);

        modal.find('.well').text(conf);
    });;
}