JS 如何向Bootstrap Modal传递参数

Question

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

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

Answer 1

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

  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/

Answer 2

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

$('#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);
});