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(){ } });
