console
var toastTimer = null;
$.extend({
confirm: function(params, callback, cancelCallback) {
var defaultOpt = {
modalClass: 'confirm-modal-common',
title: '提示',
msg: '',
cancelText: '取消',
confirmText: '确定',
cancel: function() {
$(this).parents('.modal').addClass('hide');
},
confirm: function() {
$(this).parents('.modal').addClass('hide');
}
};
if (typeof params === 'string') {
params = {
msg: params,
confirm: callback || defaultOpt.callback,
cancel: cancelCallback || defaultOpt.callback,
};
}
var opt = $.extend({}, defaultOpt, params),
confirmModal = $('.' + opt.modalClass);
var hideCancel = opt.cancelText ? '' : 'hide-important';
if (confirmModal.length <= 0) {
var confirmHtml = '<div class="modal confirm-modal ' + opt.modalClass + '">' +
'<div class="modal-mask"></div>' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<i class="iconfont" data-dismiss="modal"></i>' +
'<div class="modal-title">' + opt.title + '</div>' +
'</div>' +
'<div class="modal-body">' +
opt.msg +
'</div>' +
'<div class="modal-footer">' +
'<button type="button" class="hw-btn modal-confirm-btn" data-dismiss="modal">' + opt.confirmText + '</button>' +
'<button type="button" class="hw-btn hw-default-btn modal-cancel-btn ' + hideCancel + '" data-dismiss="modal">' + opt.cancelText + '</button>' +
'</div>' +
'</div>' +
'</div>';
$('body').append(confirmHtml);
setTimeout(function() {
confirmModal = $('.' + opt.modalClass);
confirmModal.removeClass('hide').show();
}, 20);
} else {
confirmModal.removeClass('hide').show().find('.modal-body').html(opt.msg);
confirmModal.show();
}
$('body').one('click', '.modal-confirm-btn', function() {
if (opt.confirm) {
opt.confirm();
$(this).parents('.modal').addClass('hide');
}
});
$('body').one('click', '.modal-cancel-btn', function() {
if (opt.cancel) {
opt.cancel();
$(this).parents('.modal').addClass('hide');
}
});
},
alert: function(params, time) {
var elem = $('.hw-alert');
time = time || 1500;
if (toastTimer) {
clearTimeout(toastTimer);
}
if (elem.length > 0) {
elem.fadeIn().find('.hw-container').text(params);
} else {
elem = document.createElement('div');
elem.className = 'hw-alert';
elem.innerHTML = '<div class="hw-mask"></div><div class="hw-container">' + params + '</div>';
elem.style.display = 'block';
$('body').append(elem);
elem = $(elem);
}
toastTImer = setTimeout(function() {
elem.fadeOut();
}, time);
}
});
$('body').on('click', '[data-dismiss="modal"]', function() {
$(this).parents('.modal').addClass('hide');
});
$('body').on('click', '[data-toggle="modal"]', function() {
var target = $(this).data('target');
$(target).removeClass('hide');
});
$(function() {
var imgModal = $('#img-modal');
$('.hw-attachment-lists').on('click', '.delete-file', function() {
var _this = this;
$.confirm('确认删除该附件吗？', function() {
$(_this).parents('.list').remove();
});
});
$('body').on('click', '.hw-img-lists .delete-img', function() {
var _this = this;
$.confirm('确认删除该图片吗？', function() {
var btnLabel = $(_this).parents('.hw-img-lists').find('label');
btnLabel.show();
btnLabel.html('+');
$(_this).parents('.list').remove();
});
});
$('body').on('click', '.hw-img-lists .preview-img', function () {
var imgurl = $(this).parents('.list').find('img').attr('src');
createPreviewModal(imgurl);
});
function isIEEleven(){
if ("ActiveXObject" in window && window.navigator.userAgent.indexOf("MSIE") == -1) {
return true;
} else {
return false;
}
}
function createPreviewModal(url) {
if (imgModal.length > 0) {
imgModal.find('.modal-body').find('img').attr('src', url);
imgModal.removeClass('hide');
return;
}
var str = '<div class="modal hide" id="img-modal">'+
'<div class="modal-mask"></div>'+
'<div class="modal-content">'+
'<div class="modal-header">'+
'<i class="iconfont" data-dismiss="modal"></i>'+
'<div class="modal-title">图片预览</div>'+
'</div>'+
'<div class="modal-body">'+
'<img class="preview-img-box" src="'+ url +'">'+
'</div>'+
'</div>'+
'</div>';
$('body').append(str);
setTimeout(function() {
imgModal = $('#imgModal');
imgModal.removeClass('hide');
}, 20);
}
});
<div class="hw-iframe">
<div class="hw-header-wrapper">
<div class="hw-header">
<div class="hw-header__item--left">
企业详情
</div>
</div>
</div>
<div class="hw-group">
<div class="group-title">附件上传</div>
<div class="group-info">
<div class="group-item">
<div class="hw-input-label">
<div class="name"></div>
<div class="form-control">
<label for="file-input" class="hw-btn hw-default-btn add-file-btn">
点击上传
</label>
</div>
</div>
</div>
<div class="group-item">
<div class="hw-input-label">
<div class="name">xx附件</div>
<div class="form-control auto">
<div class="hw-attachment-lists" data-input-name="attachment[]">
<div class="list">
<div class="detail">
<div class="file-name">loading.png</div>
<div class="status">
<i class="iconfont"></i>
<i class="iconfont delete-file"></i>
</div>
</div>
<a href="" download="loading.png">下载</a>
<input type="hidden" name="undefined" value="">
</div>
<div class="list">
<div class="detail">
<div class="file-name">loading.png</div>
<div class="status">
<i class="iconfont"></i>
<i class="iconfont delete-file"></i>
</div>
</div>
<a href="" download="loading.png">下载</a>
<input type="hidden" name="undefined" value="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group-item">
<div class="hw-input-label">
<div class="name">xx图片</div>
<div class="form-control">
<div class="hw-img-lists">
<div class="list">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1251074959,534534460&fm=27&gp=0.jpg" alt="">
<div class="operate">
<i class="iconfont preview-img"></i>
<i class="iconfont delete-img"></i>
</div>
<div class="musk"></div>
</div>
<label for="img-input" class="add-img-btn">+</label>
<span class="tip">(300px * 300px)</span>
</div>
</div>
</div>
</div>
</div>
</div>