YII 对话框

感觉后台的弹出窗口一直是系统功能实现的弱项，由于系统大部分采用了layer，但是layer实现ajax加载网页内容的显示效果与系统兼容性不是很好，导致每个升级到弹出窗口的展现都需要前端人员参与设计，十分耗时，所以对前端的代码进行了简单的封装，使用方式如下：

1.依赖jquery.method.js，后台作为公共函数已经引入，无需自己调用。

2.使用方式：

（一）最常用，也是非常建议的ajax加载网页内容：

		$("body").on("click", ".offsale-goods", function() {
			var id = $(this).data("id");
			
			$.modal({
				// 标题
				title: '违规商品',
				// ajax加载的设置
				ajax: {
					url: '/goods/publish/illegal',
					data: {
						id: id
					}
				},
			});
			
		});

（一）直接引用页面元素：

		$.modal({
			title: '违规商品',
			content: '123123',
		});

API:

1. $.modal(options)可以打开弹出窗口。

2. options默认值为：

		var defaults = {	
			id: uuid(),
			title: false,
			content: '',
			footer: false,
			width: false,
			height: false,
			// 用于存放一些交互用的数据
			params: {},
			ajax: false,
			// 触发器，会在触发器的data中存放modal
			trigger: false,
			// 在调用 show 方法后触发。
			onshow: null,
			// 当调用 hide 实例方法时触发。
			onhide: null,
		};

3.获取元素绑定的Modal：$.modal(jquery对象),用于获取触发器、Modal中的元素所绑定的Modal对象。

4.常用函数：

打开模式对话框，会触发onshow的回调函数
modal.show()

隐藏模式对话框，会触发onhide的回调函数
modal.hide()

切换显示隐藏的状态
modal.toggle()

销毁模式对话框
modal.close()

设置宽度
modal.width(宽度)

设置高度
modal.height(高度)

// 设置标题
modal.title(标题)

添加按钮
modal.addButton({
id: 按钮ID,
text: 按钮显示的文本,
btn_class: 'btn btn_primary' // 按钮的样式
click: null, // 按钮的点击事件，默认实现了点击隐藏的事件
});

// 根据按钮ID移除按钮
modal.removeButton(id);

5.常见问题：

1.点击某个按钮或者超链接触发打开了一个Modal，那么想下次点击再次打开同一个Modal的话可以如下操作：

$("#按钮").click(function(){

var modal = $.modal($(this));


if(modal){
  modal.show();
}else{
 modal = $.modal({
  //创建一个新的对话框
});
}

});

2.如何在打开的对话框中获取Modal对象？

为了了能够灵活操作对话框中的页面元素，建议在Modal的内容页面顶部加入

{$uuid = uuid()}

这样来创建一个唯一标识，并且赋值给对话框内容页的外层容器，容器的ID可以设置为$uuid
例如：<div id="{$uuid}">

这样在页面中操作时可以通过 $("#{$uuid}").find("你要查找的元素")，这种方式可以确保不会和其他页面内相同的元素发生冲突。

获取当前页面所属的Modal对象如下：

var modal = $.modal($("#{uuid}"));

然后就可以随意使用了

3.对话框如何和打开对话框的页面进行参数的交互？

很多时候需要将页面的一些参数传递给Modal对象，可以通过Modal对象的params属性作为一个间接的容器，但是大多时候Modal对象和打开的页面就在同一个页面，只要变量的范围允许，都可以引用的。

猜你喜欢