由于项目需要，做了一个简单的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的按钮上添加属性
<a href="/admin/img" data-toggle="modal" data-function="FillImg" data-target="#commonModal" class="btn btn-success" id="alert">选择图片</a>
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 += '<div class="avatar avatar-xl">'+
''+
'</div>';
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');