自制弹出框插件

       LZ前段时间做了一个新项目，在新要求中，新增，编辑这些页面不能嵌在页面里，需要使用悬浮的弹出框插件，由于网站风格的原因，弹出框的样式等都是美工设计好的，项目经理有意让LZ封装一个内部使用的弹出框插件出来，做到通用可配置，避免代码重复率，且便于维护。

       说实话，LZ以前确实接触过不少js插件，比如codemirror，kindediter，柱状图，折线图。。。而且自己也尝试修改过不少前辈们留下来的js控件，但是自己封装插件倒是头一回，但是需求很明确，经理对我如此信任，LZ硬着头皮也要把他搞出来。

       说到js插件，很重要的一点就是可配置，数据的来源怎么处理，很容易的想到了ajax，把请求数据的url作为参数传递给控件，利用ajax请求数据，再渲染到弹出层的html元素中，从而实现弹出效果。由于每个渲染的页面都是独立可单独编写的页面代码，涉及大量内嵌的js代码，ajax将整个html页面拼接给摸个dom元素的时候，不时出现不兼容的现象，很容易出现js不生效的问题，因此做了大量的测试后，LZ最终放弃了这个方案，改为利用iframe加载新页面，总体来说，iframe在加载新页面方面十分方便高效，js不生效的问题迎刃而解。

       由于历史遗留原因，LZ项目组的页面代码也大量使用了iframe加载新页面，这给弹出框的弹出位置带来了不小的麻烦，为此，LZ专门为其增加了一个container参数，默认为当前window，根据弹出框所要展示的层次位置，灵活进行控制。

       弹出框会存在内容大小的问题，LZ起先想利用内部页面的长宽计算外部iframe的大小，再根据此计算弹出框居中的位置，但在其他同事使用，以及自己测试后，发现此种方案有不合理的地方。因为内部页面千遍万化，很多已经调整好的css样式或者html标签，会导致自动撑开iframe的过程中出现误差，导致页面不美观的行为，需要调整内部页面css才可以解决（LZ尝试iframe的load事件加载完成后计算其宽高也没有完美解决该问题）。最后LZ为插件设置了with和height属性，由使用者自行调整页面大小，实践证明，同事们在使用的过程中调整所费时间和成本还是很少的，几次调整之后基本都达到了满意的效果。

       当然了，大多数的弹出框都是带有可移动的功能，这个也需要考虑到，再多加一个isMove属性，当然要绑定keyup，keydown事件了，具体内容可查看附件代码，在此不做赘述。由于项目中弹出框主要目的是用于新增和编辑功能，所以按钮只有一个，lz也为是否需要按钮加了条件isSaveButton，按钮文字可配置saveBtnTitle。点击保存时，需要调用内部页面的js函数，需要提供访问内部iframe方法的参数，做到控件可控制的winFuncs。当然，点击保存和点击关闭弹出框的按钮添加了回调函数，方便后续处理，为了更加人性话，irame加载页面的过程中也增加了加载中。。。的滚动条设计。

       做完整个插件，从渲染到绑定事件，代码区区百行，但是很多设计的苦恼和调试的辛苦只有LZ本人知道，很多参数的设计都是来源于实际使用经验，尽管还有很多不足之处，但总归是个可以使用的js小插件，特此与大家分享。

使用样例如下：

var Win = new WinBox({
	container:window.parent,
	url: 'xx.action',
	width:900,
	height:400,
	title:'编辑',
	isSaveButton:true,
	isMove:true,
	saveWin:function(){
		Win.winFuncs.save();
	},
	closeWin:function(){
	}
});