弹出层插件的编写-layer(跨iframe传值回调)

弹出层(layer)在往上有非常多，这里为什么我要把它的实现提出来，原因有以下2点：

1、写这篇文章也算是我博客的一个开端，他们都说：“不写博客成不了大神” - -

2、我见过的弹出层中都基本没有处理跨iframe传值回调，或者说不是真正意义上的回调函数。

3、一个layer 10K左右就可以完成的功能，非得引用一个jquery EasyUI、jquery 等等的方式，都是我不能接受的。

 

一个独立的插件应该尽量减少依赖，这也是设计模式中追求的解耦与减少依赖。(layer去依赖某种库或多个库，不是一个很好的选择。)

 

 

先说说调用方式：插件做出来是让人使用的，我觉得从最终的展现形式入手，能让人更直观的了解这个插件是干嘛的。以及它的优点。

 演示代码中我仅仅演示了Iframe弹出层的方式，主要就是看它的回调函数。其它方式，可以在源码中自己查看，稍后将放出源码。

 

调用方式Code：

<input type="button" οnclick="iframe0()" value="iframe层，默认无底部" />

<textarea id="callBox" style="height:200px"></textarea>

    function iframe0() {
        layer.win("回调函数的演示", "callback.htm", function (data) {
            document.getElementById("callBox").value += data + "\r\n";
        })
    }

上面代码是在index.html页面中的代码，这种场景很多，（比如：订单页面里，需要选择部门的数据，往往会把部门的数据做成一个单独的页面，通过弹出层调用之后选择，然后返回对应的数据）

layer.win是弹出iframe的方式，参数1为弹出层的标题(这个参数其实非常灵活)，参数2一看就是一个页面的url，这里设置为callback.html。参数3：这个参数很关键了。它是一个真正意义上的回调函数，也就是当callback.html选择数据返回之后执行的代码。文字比较抽象，还是看代码。

 

<