jquery+thickbox.js打造弹出框

下面主要说说thickbox的两个重要的应用，也是我们开发项目中经常用到的:

 下载源代码下载源代码

一.把某个DIV层浮动显示:

应用方面：弹出框，浮动层

<script type="text/javascript" src="../js/jquery.js" ></script>
<script src="../js/thickbox.js" type="text/javascript"></script>
 <link href="../css/thickbox.css" rel="stylesheet" type="text/css" />

  <div>

  <asp:TextBox id="txtCorporation" runat="server" Width="200px"></asp:TextBox>
 [<a href="#TB_inline?height=300&amp;width=400&amp;inlineId=divCorporationListContent"class="thickbox" title="企业列表">添加</a>]

</div>

<!--企业列表-->
<div id="divCorporationListContent" style="display: none">
    <div id="divCorporationList">
        <myasp:CorporationList id="mycorporationList" runat="server"></myasp:CorporationList>
      </div>
    <div class="pageButtonList">
        <input id="btnSetSupplierSale" type="button" value="选择" class="btnPassClass" />
    </div>
</div>

着色部分是个关键点，处理好这个基本没问题

一.嵌入Iframe然后根据参数显示页面:

应用方面：根据ID显示详细信息

<script src="js/thickbox.js" type="text/javascript"></script>
<link href="css/thickbox.css" rel="stylesheet" type="text/css" />

 

  <asp:GridView CssClass="GridViewStyle" RowStyle-CssClass="GridViewRowStyle"   HeaderStyle-CssClass="GridViewHeaderStyle"   ID="roleList" runat="server" Width="100%"   AutoGenerateColumns="False"  OnRowDataBound="roleList_RowDataBound" OnRowCommand="MyFile_RowCommand"  >
                    <Columns>
                                <asp:BoundField DataField="OrderID" HeaderText="订单号" ItemStyle-HorizontalAlign="center"/>
                               
                                <asp:TemplateField HeaderText="出发地">
                                    <ItemTemplate>
                                      <%#GetAddressByAreaID(Convert.ToInt32(Eval("BeginPoint")))%>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                 <asp:TemplateField HeaderText="目的地">
                                    <ItemTemplate>
                                      <%#GetAddressByAreaID(Convert.ToInt32(Eval("EndPoint")))%>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField DataField="BeginTime"  HeaderText="出发时间" />
                                <asp:BoundField DataField="EndTime"  HeaderText="到达时间" />
                              <%--  <asp:BoundField DataField="OrderTime" ItemStyle-HorizontalAlign="center" HeaderText="订单时间" />--%>
                                 <asp:TemplateField HeaderText="订单状态" ItemStyle-HorizontalAlign="center"  >
                                    <ItemTemplate>
                                      <%#Eval("state").ToString().Equals("2") ? "<font style='color:Red'>已过期</font>" : Eval("state").ToString().Equals("0")?"正常":"结束"%>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                   <asp:TemplateField HeaderText="删除" ItemStyle-HorizontalAlign="center">
                                 <ItemTemplate>
                                 <asp:LinkButton ID="LinkButton2" Visible='<%#Eval("state").ToString()=="3"?false:true %>' CommandArgument='<%# Eval("OrderID") %>' CausesValidation="false"  CommandName="Del" runat="server">删除</asp:LinkButton>
                                   </ItemTemplate>
                                 </asp:TemplateField>

                         
                                <asp:TemplateField HeaderText="设置状态" ItemStyle-HorizontalAlign="center">
                                 <ItemTemplate>
                                <input type="button" id="btnshow"  value='完成' onclick="popupDiv('pop-div','<%#Eval("OrderID")%>');"/>
                                       </ItemTemplate>
                                </asp:TemplateField>

                                <asp:TemplateField HeaderText="修改" ItemStyle-HorizontalAlign="center">
                                <ItemTemplate>
                                    <a href='OrderEdit.aspx?ID=<%#Eval("OrderID")%>' >编辑</a>
                                </ItemTemplate>
                               </asp:TemplateField>
                                <asp:TemplateField HeaderText="查看" ItemStyle-HorizontalAlign="center">
                                  <ItemTemplate>
                                   <a href="OrderDetail.aspx?ID=<%#Eval("OrderID") %>&keepThis=true&TB_iframe=true&height=400&width=600" title="订单详细" class="thickbox">详情</a>
                                  </ItemTemplate>
                                </asp:TemplateField>
                              
                  </Columns>
                          <EmptyDataTemplate><div  class="empty">暂时没有结果!</div></EmptyDataTemplate>
                    </asp:GridView>

希望能在项目中给大家带来很好的应用