JQuery的一個外掛程式boxy

這個外掛程式是在頁面上彈出一個div式的對話方塊，然後對對話方塊裡的內容進行操作，以進行互動的處理。以例子來說明。

使用前引用這個外掛程式的JS  <script src="<%=this.Page.ResolveUrl("~/JS/jquery.boxy.js")%>" type="text/javascript"></script>

首先，在頁面上定義一個Label標籤，點擊時彈出一個對話方塊。

<asp:Label onclick="javascript:newModalSelfGroup();" Style="cursor: hand;" ForeColor="BlueViolet" ID="LinkButton1" runat="server">自選組管理</asp:Label>

指令碼函數：

function newModalSelfGroup()
{
    var con1 = "<iframe src='<%=this.Page.ResolveUrl("~/TrendCenter/ManagerSelfGroup.aspx")%>' scrolling='auto' style='padding: 0px; margin: 0px; border-style: none;background-color: #FFFFFF;'></iframe>";
    var box1;
    box1=new Boxy
    (
       con1,
       {
            modal: true, //模態  本頁面處於不活動狀態，對話方塊處於活動狀態。即con1中的頁面內容處於活動狀態(此處為iframe中嵌入的頁面內容)
            title:"自選組管理",  //對話方塊標題
            afterHide:function(e){}, //當對話方塊隱藏的時候在Boxy對象的上下文執行回呼函數
            afterShow:function(e){}, //當對話方塊顯示的時候在Boxy對象的上下文執行回呼函數
            closeText:""   //關閉功能按鈕的標題文字
        }
     );
     box1.resize(315,250);  //設定對話方塊的大小
} 

這個外掛程式是JQuery的輕量級外掛程式，網上說有 lightbox, thickbox, greybox 外掛程式可以供選擇。沒有實驗過，有興趣的朋友可以研究一下

 有關這個外掛程式的更多內容，可以參考

  1. http://www.zhangxinxu.com/study/200911/jQuery-plugin-boxy.html?jdfwkey=1mj8n

  2. http://onehackoranother.com/projects/jquery/boxy/