JS 如何向Bootstrap Modal传递参数

callmesoul求正能量
  • 344

得知如果用按钮点击显示模态框

<a data-toggle="modal" data-id="<?php echo $v['id']?>" data-target="#deleteModal">删除</a>

可以通过以下方法获取传递的data-id值

var modal = $("#deleteModal");
modal.on("show.bs.modal", function(e) {    
    // 这里的btn就是触发元素,即你点击的删除按钮
    var btn = $(e.relatedTarget),
        id = btn.data("id"); 
        
        // do your work
  })

可是我要穿的是我当前对象的index,所以就用到了js去出发模态框并传递参数

$('#selectcoursemodal').modal({
        remote:"/special/queryCourse",
        show:true,
        index:'1'
    });
$('#selectcoursemodal').on('show.bs.modal', function (event) {
        var a = $(event.relatedTarget) // a that triggered the modal;
        var title = a.data('index');
        console.log(index);
    });

但这样写并不能获取到index,为undefined,有没有大神知道要怎么用js传?

回复
阅读 12.8k
2 个回答

谢邀,这事儿得看一下源代码

  var Modal = function (element, options) {
    this.options   = options
    this.$element  = $(element)
    this.$backdrop =
    this.isShown   = null

    if (this.options.remote) {
      this.$element
        .find('.modal-content')
        .load(this.options.remote, $.proxy(function () {
          this.$element.trigger('loaded.bs.modal')
        }, this))
    }
  }

发现什么了么,哈哈,文档不会告诉你,.modal方法还可以用第二个参数传个参,可能主要是怕影响这个插件自身的逻辑吧,毕竟那个地方按照他们约定的应该是原btn的dom。

举个例子

$('#myModal').on('show.bs.modal', function(e) {
  alert(e.relatedTarget.index)
})

$('#myModal').modal({ show: true }, {
  index: '23333'
});

给你写了个demo,点开预览
https://jsfiddle.net/8ujaqutz/

你存个公共变量或者在你这个模态框上绑定一个属性传值。

$('#selectcoursemodal').data('index',1)

$('#selectcoursemodal').modal({
        remote:"/special/queryCourse",
        show:true
    });
    
$('#selectcoursemodal').on('show.bs.modal', function (event) {
    var a = $('#selectcoursemodal') // a that triggered the modal;
    var title = a.data('index');
    console.log(index);
});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏