基于vue.js原生封装的Modal层控件,不需要webpackage等环境,引入js,css即可开箱使用,无需在页面上提前声明Modal,随用随生成,动态渲染挂接到页面,关闭后自动移除,方便快捷,并且支持页面大小,页面传参,页面回调函数等在开发中需要使用的功能

查看效果请下载后部署,查看example.html页面

引入控件

1.引入vue.js

2.引入fastdialog文件夹下的文件

使用控件

普通打开页面

OpenDialog("111", "打开窗口", "newpage1.html", "600", "1200");
参数:dialog标识,页面标题名称,页面url地址,页面高度,页面宽度
百分比打开页面
OpenDialog("111", "打开窗口", "newpage1.html", "70", "80",null,null,"%");
注:第8个参数为宽高的单位,不传默认px
打开的页面关闭后,主页面触发回调函数
OpenDialog("222", "关闭窗口有回调函数", "newpage1.html", "600", "1200", AfterClose);
打开的页面关闭后,主页面触发回调函数,回调函数包含关闭页面传递的返回值
OpenDialog("333", "回掉函数包含返回值", "newpage1.html", "600", "1200", AfterCloseWithReturn);
function AfterCloseWithReturn(ReturnValue) {
alert("page1回传的参数:"+ReturnValue);
}
打开页面并传递参数
OpenDialog("444", "有回调函数并传参", "newpage1.html", "600", "1200", AfterCloseWithReturn, "125sds");
打开页面获取参数
var params = GetParams();
if (params && params != "undefined") {
alert("打开页面接收的参数:" + params);
}
关闭打开的页面
CloseDialog();
关闭打开的页面并向主页面传递返回值,配合3使用
CloseDialog("page1回传222222");
在顶层窗口打开页面,一般用于iframe中
OpenTopDialog("777777", "有回调函数并传参", "newpage2.html", "500", "1000", AfterCloseWithReturn, "page1-page2传参");
关闭顶层页面
CloseDialog("page2回传111111","page3");
注:CloseDialog方法在关闭OpenDialog的页面,无需传参,或者传返回值,关闭OpenTopDialog的页面时必须传入两个参数,ReturnValue和打开的dialog的id标识,无返回值传null,如果一个页面同时需要被 OpenDialog和OpenTopDialog打开,两个参数必传
打开普通提示窗
OpenAlert("提示", "请在规定期限内处理完成!");
关闭提示窗关闭后触发回调事件
OpenAlert("提示", "请在规定期限内处理完成!",AfterClose);
打开成功提示窗
OpenSuccess("提示", "请在规定期限内处理完成!");
打开警告提示窗
OpenWaring("提示", "请在规定期限内处理完成!",null,"知道了");
打开失败提示窗
OpenFail("提示", "请在规定期限内处理完成!");
打开确认提示窗
OpenConfirm("确认提示", "是否删除当前数据", function () {
OpenSuccess("提示", "删除成功");
});
OpenConfirm("确认提示", "是否删除当前数据", function () {
}, "确认删除", "取消操作");

注:

1.alert类提示窗支持4个参数 标题,提示信息,回调函数,关闭按钮文字

3.confirm提示窗支持5个参数 标题,提示信息,确认按钮回调函数,自定义确认按钮文字,自定义取消按钮文字

一些说明:

下载代码的同学查看例子时需要部署一下,因为Modal中包含了请求模板的http操作

此版本存在一些缺点,打开dialog需要网络请求html模板,请求的具体路径需要根据引入文件夹位置进行修改,现已完成基于vue工程开发的组件版本,引入js,css直接使用,详情请查看vue分支