某个没用过的但是很简洁的弹出框插件: http://www.jq22.com/jquery-info2351
一、自己创建js文件并粘贴进去
;$(function () {
window.Modal = function () {
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
var alr = $("#ycf-alert");
var ahtml = alr.html();
//关闭时恢复 modal html 原样,供下次调用时 replace 用
//var _init = function () {
// alr.on("hidden.bs.modal", function (e) {
// $(this).html(ahtml);
// });
//}();
/* html 复原不在 _init() 里面做了,重复调用时会有问题,直接在 _alert/_confirm 里面做 */
var _alert = function (options) {
alr.html(ahtml); // 复原
alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
alr.find('.cancel').hide();
_dialog(options);
return {
on: function (callback) {
if (callback && callback instanceof Function) {
alr.find('.ok').click(function () { callback(true) });
}
}
};
};
var _confirm = function (options) {
alr.html(ahtml); // 复原
alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
alr.find('.cancel').show();
_dialog(options);
return {
on: function (callback) {
if (callback && callback instanceof Function) {
alr.find('.ok').click(function () { callback(true) });
alr.find('.cancel').click(function () { callback(false) });
}
}
};
};
var _dialog = function (options) {
var ops = {
msg: "提示内容",
title: "操作提示",
btnok: "确定",
btncl: "取消"
};
$.extend(ops, options);
console.log(alr);
var html = alr.html().replace(reg, function (node, key) {
return {
Title: ops.title,
Message: ops.msg,
BtnOk: ops.btnok,
BtnCancel: ops.btncl
}[key];
});
alr.html(html);
alr.modal({
width: 500,
backdrop: 'static'
});
}
return {
alert: _alert,
confirm: _confirm
}
}();
});
二、使用方法
1. 直接弹出确定的提示框
Modal.alert({msg:"请求成功"});
如果需传入数据
Modal.alert({msg:data.message});//data.message是后端传来的参数
2.弹出询问框,是否要进行某项操作吗?
Modal.confirm(
{
msg: "确定要删除角色吗?"
}).on( function (e) {
if(e) {
$.ajax({ //点击确定按钮,执行ajax请求
type: 'POST',
data: {id: id},
url: yy_context + '/ou/userRole/deleteRoleById.do',
dataType: 'json',
async: false,
success: function (data) {
Modal.alert({msg: data.message})
if (data.state) {
refreshRoleList();
}
}
});
}
})