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/

 

 

转载于:https://www.cnblogs.com/purplefox2008/archive/2010/09/08/1821668.html