由于項目需要轴脐，做了一個簡單的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 在觸發(fā)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中選中圖片后，確認時觸發(fā)以下事件
var $function = $("#alert").data('function'); // #alert 是指觸發(fā)該modal的按鈕ID
$("#commonModal").modal().callbackData($function,json); //指定回調方法名與回調參數
$("#commonModal").modal('hide');
// 下面兩行代碼是解決：第二次點開modal的時候厦瓢，會導致遮罩層依舊存在提揍，手動清除遮罩層
$(".modal-backdrop").remove();
$("body").removeClass('modal-open');