利用bootstrap的模态框实现弹出确认提示框
前端 ⋅
波波文 ⋅
1年前 ⋅
2 点赞 ⋅
1,972 阅读 ⋅
0 评论
具体如下:
/**
* 自定义的弹出确认框
* @param callback 回调函数
* @param heading 标题
* @param content 内容
* @param okButtonTxt 确认的btn文案 默认文案 确认
* @param cancelButtonTxt 取消的btn文案 默认文案 取消
*/
confirm:function(callback, heading, content, okButtonTxt, cancelButtonTxt) {
heading = heading || '温馨提示';
content = content || '您确定要操作吗?';
callback = callback || common.alertMsg;
okButtonTxt = okButtonTxt || '确认';
cancelButtonTxt = cancelButtonTxt || '取消';
var confirmModal =
$('<div class="modal fade">'+
'<div class="modal-dialog">'+
'<div class="modal-content">'+
'<div class="modal-header">'+
'<h4 class="modal-title">'+ heading +'</h4>'+
'<button type="button" class="close" data-dismiss="modal">×</button>'+
'</div>'+
'<div class="modal-body">' + content + '</div>'+
'<div class="modal-footer">'+
'<button id="okButton" type="button" class="btn btn-success">' +okButtonTxt+ '</button>'+
'<button type="button" class="btn btn-secondary" data-dismiss="modal">' +cancelButtonTxt+ '</button>'+
'</div>'+
'</div>'+
'</div>'+
'</div>');
//点击确认的操作
confirmModal.find('#okButton').click(function(event) {
//todo eval将字符串转化为函数执行
eval(callback);
confirmModal.modal('hide');
});
//显示model框
confirmModal.modal('show');
}