下载地址:https://github.com/StephanWagner/jBox

Notice

var box = new jBox('Notice', {
            overlay: false,
            color: "green",
            attributes: {
                x: 'left',
                y: 'top'
            },
            autoClose: false,
            content: "正在拉取分类……"
 });

autoClose可以是毫秒时间,false表示显示调用box.close()


Modal

页面

<div id="itemContainer" style="display:none;">弹出层内容</div>

js

productList.editBox = new jBox('Modal', {
	closeButton: 'title',
	title: "编辑商品",
	content: $("#itemContainer"),//页面元素 display:none
	draggable: 'title',//可以拖动
	width: 750,
	height: 260,
	maxWidth: 750,
	maxheight: 260,
	closeOnClick: false,
	ajax: {
		url: '/admin/getitem',
		data: {
			itemid: productId
		},
		dataType: "json",
		type: "POST",
		reload: 'strict',
		setContent: false,
		success: function (response) {
			if (response && response.item) {
				productList._initItem(response.item);
			}
			else {
				productList.editBox.close();
				new jBox('Notice', {
					overlay: false,
					color: "black",
					attributes: {
						x: 'left',
						y: 'top'
					},
					autoClose: 2000,
					content: "商品不存在"
				});

			}
		}
	},
	onclose: function () {
		productList.editBox = null;
	}
}).open();

//显示调用open


Confirm

productList.editBox = new jBox('Confirm', {
	content: $("#itemContainer"),
	adjustTracker: false,
	adjustPosition: false,
	reposition: false,
	draggable: 'title',
	width: productList._eidtBoxSize.width,
	height: productList._eidtBoxSize.height,
	maxWidth: productList._eidtBoxSize.width,
	maxheight: productList._eidtBoxSize.height,
	closeButton: 'title',
	attributes: {              
		x: 'left',
		y: 'top'
	},
	position: {
		x: 'center',
		y: 'center'
	},
	title: '编辑商品',
	closeOnConfirm:false,
	cancelButton: '关闭',
	confirmButton: '保存',
	confirm: function () {
		productList._saveProduct();
	},
	ajax: {
		url: '/admin/getitem',
		data: {
			itemid:productId
		},
		dataType: "json",
		type:"POST",
		reload: 'strict',
		setContent: false,
		success: function (response) {
			if (response && response.result) {
				productList._initProductInfo(response.result);
			}
			else {
				productList.editBox.close();
				new jBox('Notice', {
					overlay: false,
					color: "black",
					attributes: {
						x: 'left',
						y: 'top'
					},
					autoClose: 3000,
					content: "服务器忙,请稍后重试"
				});
			}
		},
		error: function () {
			productList.editBox.close();
			new jBox('Notice', {
				overlay: false,
				color: "black",
				attributes: {
					x: 'left',
					y: 'top'
				},
				autoClose: 3000,
				content: "服务器忙,请稍后重试"
			});
		}
	}
}).open();
//open需要显示调用

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐