Bootstrap Modal <上传图片并回调数据到网页中>

由于项目需要，做了一个简单的Modal来上传图片，并从Modal传到页面上。

1.首先修改bootstrap的源代码：

1.1 打开bootstrap.js，在modal位置添加以下代码，可搜索$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) ，在其周围做如下修改：

原代码：

// MODAL DATA-API
// ==============

$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]',function (e) {
  var $this   = $(this)
  var href    = $this.attr('href')
  var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
  var option  = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())

  if ($this.is('a')) e.preventDefault()

  $target.one('show.bs.modal', function (showEvent) {
    if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
    $target.one('hidden.bs.modal', function () {
      $this.is(':visible') && $this.trigger('focus')
    })
  })
  Plugin.call($target, option, this)
})

修改代码如下：

// --新增modal回调方法传输数据
var callFunc = null
var callData = null
$.fn.extend({
  callbackData:function(callbackFunc,callbackData){
    callData = callbackData;
    callFunc = callbackFunc;
  }
})
// --回调数据截止

// MODAL DATA-API
// ==============

$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]',function (e) {
  var $this   = $(this)
  var href    = $this.attr('href')
  var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
  var option  = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())

  if ($this.is('a')) e.preventDefault()

  $target.one('show.bs.modal', function (showEvent) {
    if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
    $target.one('hidden.bs.modal', function () {
      if(callFunc != null){
        window[callFunc](callData) // 关闭modal的时候回调页面上的方法
      }
      $this.is(':visible') && $this.trigger('focus')
    })
  })
  Plugin.call($target, option, this)
})

1.2 在触发Modal的按钮上添加属性

选择图片

data-function="FillImg" FillImg则指需要回调的方法名称，回调方法默认为function FillImg(data) { }

示例代码如下：

function FillImg(data){
    var json = data.list;
    var str = "";
    var ids = "";
    if(json.length > 1){
        $.alert('仅可选择一张图片，请重新选择');
        return;
    }
    for(var i = 0;i < json.length;i++){
        str += '
'+
            '![]('+json[i].url+')'+
            '
';
        ids += json[i].id + ',';
    }
    $("input[name='img']").val(ids);
    $('.img-list').html(str);
}

1.3 在Modal中选中图片后，确认时触发以下事件

var $function = $("#alert").data('function'); // #alert 是指触发该modal的按钮ID
$("#commonModal").modal().callbackData($function,json); //指定回调方法名与回调参数
$("#commonModal").modal('hide');
// 下面两行代码是解决：第二次点开modal的时候，会导致遮罩层依旧存在，手动清除遮罩层
$(".modal-backdrop").remove();
$("body").removeClass('modal-open');