将变量传递到Bootstrap模态中

Passing a variable into a Bootstrap modal

本文关键字：Bootstrap 模态 变量      更新时间：2023-09-26

我可以将变量传递到位于模态底部的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');
});

Modal

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

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

您需要的是shown.bs.modal，一旦显示模态并且所有CSS3动画都完成，就会触发它。通过挂接此事件，您可以将数据添加到模态的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);
    });;
}
相关文章：