- 不需要修改默认提示的标题仅做修改提示内容
showmodal({content:"请确认相关信息是否都填写完成"});
- 需要修改默认提示的标题并修改提示内容相关样式
showmodal({
title: "警告",
content: "请确认相关信息是否都填写完成",
SWidth: 200,
fontSize: 14
});
- 模态窗body内容左对齐,标题居中对齐显示
showmodal({
title: "警告",
content: "请确认相关信息是否都填写完成, 请确认相关信息是否都填写完成, 请确认相关信息是否都填写完成",
SWidth: 400,
fontSize: 14,
titleCenter:true,
contentLeft:true
});
- 点击模态窗灰色背景处模态窗不会消失
showmodal({content:"请确认相关信息是否都填写完成",hideClick:"static "});
- modal-body内容为iframe
showmodal({
isText: false,//该参数一定要设置为false,src相关参数才会起作用
title: "打开西瓜博客",
src: "https://mowatermelon.github.io/",//该参数用于绑定iframe的地址,也可通过地址传参
Bclose: false
});
- modal-body内容为iframe,且iframe中使用到input
//在父级页面中
showmodal({
isText: false, //该参数一定要设置为false,src相关参数才会起作用
title: "打开xxx ",
src: "xxx.aspx?key=demo ",//该参数用于绑定iframe的地址,也可通过地址传参
Bclose: false
});
//在子级页面中添加以下语句
$(function () {
$(document).off('focusin.bs.modal');//避免bootstrap 的input内部聚焦错乱,导致iframe中的input不能正常聚焦,这句话在子页面一定要写。
$("#txtXXX").focus();
})
- 确认按钮有回调事件(非异步)
showmodal({
title: "警告",
content: "请确认相关信息是否都填写完成",
callbackB: true,
callbackBF:function(){
//dosomething
console.log("确认按钮的非异步回调事件");
return true;
/*
请注意一定要写返回值,
不需要阻断模态窗关闭事件,则直接返回true
需要阻断模态窗关闭事件,则直接返回false
*/
}
});
- 确认按钮有回调事件(异步)
showmodal({
title: "警告",
content: "请确认相关信息是否都填写完成",
callbackB: true,
callbackBF:function(){
var _this=this; // 请注意一定要先在ajax外部指明需要需要使用到的this,这个this即showmodal,这样在ajax内部才能调用到showmodal默认的相关方法
//如果是谷歌浏览器,需要在启动项中设置--allow-file-access-from-files才能进行跨域
$.ajax({
type: "POST",
url: "demo.json? &T=" + Math.random(),
dataType: 'text',
async: false,
success: function (t) {
var data = window.eval('(' + t + ')');
if (t.length > 0) {
console.log("确认按钮的异步回调事件完成");
console.log("请求到的参数是"+data.news);
_this.closeModal();
//请注意在异步事件状态为完成的时候再调用关闭模态窗事件
}
}
});
return false;// 请注意异步执行的回调方法一定要返回false
}
});
- 取消按钮有回调事件(非异步)需要两个按钮两端对齐
showmodal({
title: "警告",
content: "请确认相关信息是否都填写完成",
Qclose: true,
callbackQ: true,
callbackQF:function(){
//dosomething
console.log("取消按钮的非异步回调事件");
return true;
/*
请注意一定要写返回值,
不需要阻断模态窗关闭事件,则直接返回true
需要阻断模态窗关闭事件,则直接返回false
*/
}
});
- 取消按钮有回调事件(非异步)不需要两个按钮两端对齐
showmodal({
title: "警告",
content: "请确认相关信息是否都填写完成",
Qclose: true,
Justify:true,
callbackQ: true,
callbackQF:function(){
//dosomething
console.log("取消按钮的非异步回调事件");
return true;
}
});
- 需要多次嵌套调用模态窗
showmodal({
title: "提示信息",
content: "确定吗1",
modalIndex: "01",
Qclose: true,
callbackB: true,
callbackBF: function() {
showmodal({
title: "提示信息",
modalIndex: "02",
content: "确定吗2",
Qclose: true,
SWidth: "300",
hideClick: "static",
fontSize: "18",
callbackB: true,
callbackBF: function() {
showmodal({
title: "提示信息",
modalIndex: "03",
content: "确定吗3",
Qclose: true,
SWidth: "200",
hideClick: "static",
fontSize: "18"
});
return false;
}
});
return false;
}
});
- 需要使用全屏显示按钮
showmodal({
title: "警告",
content: "请确认相关信息是否都填写完成, 请确认相关信息是否都填写完成, 请确认相关信息是否都填写完成",
isZoom: true,
zoomCallback: function (){
console.log(this.Sheight,this.SWidth);
}
});