下面介绍bootstrap 模态框中一些小技巧：

bootstrap共享模态框，jQuery获取模态框触发元素，并使用ajax去动态获取数据

Html代码：（thinkphp的模板为例）

(由于小编的能力有限，不知道怎么在博客里插入html代码 使用图片代替，请见谅)

 http://s2/mw690/002DCseQgy6ZYPzHTb381&690

http://s8/mw690/002DCseQgy6ZYPA8X3hd7&690

http://s4/mw690/002DCseQgy6ZYPAbULp63&690

这段代码是可以从bootstrap官网直接复制的，当然要删除掉button里的一些data属性(即 data-toggle="modal" data-target="#myModal" 这两个属性)，这样子才不会触发bootstrap默认时间

在这段代码中我加入了 data-whatever属性来存放这个按钮所要发送给后端的一个url，并传了一个id。（当然url方法不同框架不同写法，这个是thinkphp的）

jQuery操作：

我在button加入了 clickmodel 这个类，是为了绑定事件，button是由模板动态生成的，具体有多少个不知道，但是可以通过事件绑定来获取当前触发模态框的元素 (this)

$('.clickmodel').bind('click',function(){
    //这里获取到了data-whatever属性
    url = $(this).data('whatever');
    $('#myModal').modal("show");

})
$("#myModal").on("show.bs.modal", function () {
    $.get(url,function(data){
        console.info(data);//打印获取的数据
        $('#myModalLabel').text('标题：'+data.sms_title);
        $('#modal-body').text(data.sms_body);
        $('#percentage').text('成功率：'+data.smpercentage);
        $('#sms_success').text('成功数：'+data.successCount);
        $('#send_number').text('总发送：'+data.smCount);
    })
});

如果熟悉bootstrap 的js 那么一定不会陌生

首先 我使用jq的bind方法 绑定了触发模态框的事件，同时获取到 this对象（也即是触发对象）的data-whatever属性来为下面方法的url服务，这里使用全局变量 是因为第二个方法

$("#myModal").on("show.bs.modal", function () {...}

不可以在第一个函数中去调用，如果在第一个函数中调用会产生多次ajax请求，获取url后就使模态框出现

$("#myModal").on("show.bs.modal", function () {...}

第二个方法  show.bs.modal  是bootstrap的模态框事件，既模态框展示过程中，在这过程中我们可以用jq的ajax去后端的数据，具体url所传回的也不一样，如果不懂，请查找jq的手册和bootstrap的一些js操作。

$("#myModal").on("show.bs.modal", function () {
       $.get(url,function(data){
         console.info(data);//打印获取的数据，这里是为了在控制台查看数据
            $('#myModalLabel').text('标题：'+data.sms_title);
                $('#modal-body').text(data.sms_body);
                $('#percentage').text('成功率：'+data.smpercentage);
              $('#sms_success').text('成功数：'+data.successCount);
             $('#send_number').text('总发送：'+data.smCount);
     })
});

（注意：ajax传回模板的数据是根据返回而确定的，请不要使用data.sms_title这些属性，另外返回的一定要是文本格式或者json ，如果是json，还需要对 json解析进一步操作）

以上就是共享模态框 获取出发事件的对象 并得到其属性进行ajax 动态查询数据