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的，即在原页面上实现的弹框，将内容追加到当前ＨＴＭＬ上

).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>

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

作者：仓储大叔，张占岭，
荣誉：微软MVP