自己写的jquery 弹出层插件,可拖动

最新推荐文章于 2026-06-20 00:18:33 发布

最新推荐文章于 2026-06-20 00:18:33 发布 · 143 阅读

标签

#javascript #ViewUI

收录于

web前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个基于jQuery的弹出层插件，该插件默认将弹窗垂直居中显示并支持拖拽功能。文中提供了两个示例：一个用于添加角色的弹窗，另一个用于编辑员工信息的弹窗，展示了如何通过按钮触发弹窗的打开与关闭。

jquery 弹出层插件，弹出位置默认垂直居中，可拖拽。

如果用过easyui的朋友，是不是发现挺相似？呵呵.参考了某网友的插件。

PS:CSS写的不咋的,要用的话可以修改CSS样式.

先介绍下怎么调用:

$(function(){
	$('#btn_add').click(function(){
		open_dialog();
	});
	$('#btn_edit').click(function(){
		open_emp();
	});
});

function open_dialog(){
	$('#role_div').dialog({
		buttons:[{
				text:"保存",
				handler:function(){
					//按纽上绑定的方法
					alert("点击保存");
					var param={};
					$.post("xx.do",param,function(data){
					
					});
				}
		},{
				text:"取消",
				handler:function(){
					alert("点击取消");
					$.fn.dialog.close($('#role_div'));
				}
		}]
	});
}
		
function open_emp(){
	$('#emp_div').dialog({
		titlebg:"red",
		buttons:[{
				text:"保存",
				handler:function(){
					
				}
		},{
				text:"取消",
				handler:function(){
					$.fn.dialog.close($('#emp_div'));
				}
		}]
	});
}