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>

好了，到目前爲止咱們的分頁彈框實例就介紹完了，若是本文章對您有所幫助，請您點一下推薦吧，哈哈