本文主要是介绍基于 Bootstrap4 的模态框对话框插件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
msgbox
基于 Bootstrap4 的模态框对话框插件
下载地址：https://github.com/tianlunvip/msgbox
进入演示页面
引用
<script src="//cdn.jsdelivr.net/gh/tianlunvip/msgbox/msgbox.js"></script>
用法：
msgbox(message, options, callback)
message: 消息文本
options: 可选,如果为字符串，则设置为消息框标题
options = {title : '信息提示', // 标题callback : callback, // 回调函数backdrop : false, // 点击遮罩层关闭功能 true 为开启 false 为关闭animation : true, // 动画显示效果center : true, // 弹出位置在中间buttons : [{type: "button", value: "确定", style : 'primary'},{type: "button", value: "取消", style : 'secondary'},],style : 'info', // 消息框风格样式remote : '' // 远程数据
};
callback：回调函数，接收一个参数 参数值为 buttons.value 区别不同按钮事件
示例：
1.Exp
简单的弹出
msgbox("我是一个提示框");
2.Exp
修改标题
msgbox("我是一个提示框"，"主席发来贺电！");
3.Exp
修改添加按钮
msgbox("我是一个提示框",{ buttons: [{type: "button", value: "确定", style : 'primary'},{type: "button", value: "取消", style : 'secondary'},{type: "button", value: "终止", style : 'danger'},],}
);
4.Exp
使用回调函数
msgbox("我是一个提示框",{ buttons: [{type: "button", value: "确定", style : 'primary'},{type: "button", value: "取消", style : 'secondary'},{type: "button", value: "终止", style : 'danger'},],},function(text){if(text === "确定"){alert("你按下了确定");}else if(text === "取消"){alert("你按下了取消");}else if(text === "终止"){alert("你按下了终止");}}
);
5.Exp
添加表单输入
msgbox("我是一个提示框",{inputs : [{type: "text", label: "用户名:", value: "George"},{type: "password", label: "密码:"}],buttons : [{type: "button", value: "确定", style : 'primary'},{type: "button", value: "取消", style : 'secondary'},{type: "button", value: "终止", style : 'danger'},],},function(text){if(text === "确定"){alert("你按下了确定");}else if(text === "取消"){alert("你按下了取消");}else if(text === "终止"){alert("你按下了终止");}}
);
6.Exp
获取表单数据
msgbox("我是一个提示框",{inputs : [{type: "text", label: "用户名:", value: "George"},{type: "password", label: "密码:"}],buttons : [{type: "button", value: "确定", style : 'primary'},{type: "button", value: "取消", style : 'secondary'},],},function(text, value1, value2){if(text === "确定"){msgbox("输入数据<br>第一个表单值：" + value1 + "<br>第二个表单值：" + value2);}else if(text === "取消"){alert("你按下了取消");}}
);
如果要获取
N个表单的值，则只需要在回调函数中添加N个参数即可
function(text, value1, value2, value3, ... , N ){if(text === "确定"){msgbox("输入数据<br>第一个表单值：" + value1 + "<br>第二个表单值：" + value2);}
}
7.Exp
加载远程数据
msgbox("",{buttons : null, // 删除默认按钮remote : 'https://www.tianlunvip.com/demo/remote.html'}
);
这篇关于基于 Bootstrap4 的模态框对话框插件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
