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对象和打开的页面就在同一个页面,只要变量的范围允许,都可以引用的。

yii

相关推荐