js~fancybox为我们提供的iframe功能

对于fancybox我们已经耳熟能详了，一般用来到表单的弹框，提示弹框等，而今天，我们将分页列表也使用fancybox来实现一下，这东西听起来简单，但做起来还真不是那么回事，有事细节需要我们注意的，首先的知识点，fancybox在弹出后，显示为静态ＨＴＭＬ代码，所以，你希望改变它上面的内容不是那么容易的，因为些时，它可能还不属于页面，针对分页列表的问题，fancybox提出了iframe功能，它允许你把一个新页面承载到fancybox弹框上，看一下美丽的截图

下面来看一下代码，代码中有控制弹框尺寸的，因具体情况自己去调整

　　　　　　 $.fancybox.open({

                href: '/Home/PartialList',

                type: 'iframe',

                padding: 5,

                scrolling: 'no',

                fitToView: true,

                width: 610,

                height: 300,

                autoSize: false,

                closeClick: false

            });

下面再看一下PartialList页面的回调代码，主要在iframe页面选中项目后，将项目的信息返回到父窗口中

 function addToFun() {

        var idArr = "";

        $("table>tbody").find(":checked").each(function (i, o) {

            idArr += $(o).val() + ",";

        });



        $("#resultList", window.parent.document).append("选中的ＩＤ列表：" + idArr);

        window.parent.jQuery.fancybox.close();

    }

下面给出一个普通版的实现，不是Iframe的，即在原页面上实现的弹框，将内容追加到当前ＨＴＭＬ上

　　　　　　$.fancybox($("#step3").html(), {

                padding: 5,

                scrolling: 'visible',

                modal: true,

                fitToView: true,

                width: 610,

                height: 300,

                autoSize: false,

                afterShow: function () {

                    $.ajax2({

                        url: '/Home/PartialList',

                        success: function (data) {

                            $("#f5list").html(data);

                        }

                    }, "f5list");

                }

            });

对应的ＨＴＭＬ代码如下

<script type="text/html" id="step3">

    <div id="f5list"></div>

</script>

好了，到目前为止我们的分页弹框实例就介绍完了，如果本文章对您有所帮助，请您点一下推荐吧，哈哈