对于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>
好了，到目前为止我们的分页弹框实例就介绍完了，如果本文章对您有所帮助，请您点一下推荐吧，哈哈
本文转自博客园张占岭（仓储大叔）的博客，原文链接：js~fancybox为我们提供的iframe功能，如需转载请自行联系原博主。
