技术问题—欢迎围观！！！

Question

想做这样一个功能
 <asp:DataGrid ID="DataGrid2" runat="server" AutoGenerateColumns="False" CellPadding="4"
                    Width="800px" AllowPaging="True" PageSize="4"
                    OnItemCommand="ItemsGrid_Command"
                     OnItemDataBound="DataGrid2_ItemDataBound"
                     ondeletecommand="DataGrid2_DeleteCommand" 
                     
                     onpageindexchanged="aaaDataGrid2_PageIndexChanged"   ForeColor="#333333" 
            BorderColor="#0693F5" BorderWidth="1px"
                    >
                 <FooterStyle BackColor="#507CD1" ForeColor="White" Font-Bold="True" />
            <EditItemStyle BackColor="#2461BF" />
            <SelectedItemStyle BackColor="#008A8C" Font-Bold="True" ForeColor="Black" />
            
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" 
                Height="25px" NextPageText="下一页" PrevPageText="上一页" />
            <AlternatingItemStyle BackColor="White" />
            <ItemStyle Height="30px" BackColor="#EFF3FB"  
                BorderStyle="Groove" BorderWidth="1px" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" 
                Height="25px" />
                    
                <Columns>
                    <asp:BoundColumn DataField="fnumber" HeaderText="图书编码">
                        <HeaderStyle Width="10%" />
                        <ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
                            Font-Underline="False" HorizontalAlign="Center" />
                    </asp:BoundColumn>                    <asp:ButtonColumn CommandName="Delete" Text="删除">
                            <HeaderStyle Width="5%" />
                    </asp:ButtonColumn>
                    <asp:ButtonColumn CommandName="Add" Text="图书明细" >
                            <HeaderStyle Width="5%" />
                    </asp:ButtonColumn>
                    <asp:ButtonColumn CommandName="Select" Text="aa">
                            <HeaderStyle Width="5%" />
                    </asp:ButtonColumn>
                </Columns>
            </asp:DataGrid>做这样一个功能点击图书明细，可以弹出一个对话框（显示的时候背景为灰色，当关闭对话框后显示原来的页面），显示这本书的明细！！！

Answer 1

int   id=Convert.ToInt32(this.DataGrid1.DataKeys[e.Item.ItemIndex]); 
e.Item.Attributes[ "onclick "]= "window.open('a.aspx?id= "+ id.ToString()+ " ', '_blank '); ";   
或使用DIV或jquery 

Answer 2

这个应该没啥难度的，见议看看jquery的thickbox的效果

Answer 3

用ajax control kit里面的ModalPopupExtender挺好的， 
.cs按钮事件里
string id = currentClickedID;
programmaticModalPopup.Show()；
LoadBookDetail(id）；//到数据库把当前点击的书的信息读出来， 赋到前台的Panel里去前台代码：
这个对你用不到， 只是为赋个ID：
 <asp:LinkButton runat="server" ID="lbViewPrint"><asp:LinkButton>这是弹出的Panel， 里面的内容每点一个书时就变一下：
<asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
    <asp:Panel ID="Panel3" runat="server" CssClass="Pro_Pop_Panel">
        <div class="Pro_Pop_Header"><a target="_blank" href="<%= SSIEngine.Core.Utils.GetPrintProtocolPageURL(autoNumber, false, string.Empty) %>"><%= Resources.labels.protocol_sendToPrinter %></a><span style="margin-left:20px;"><asp:LinkButton runat="server" ID="lbSaveToDisk" OnClick="lbSaveToDisk_Click"><%= Resources.labels.protocol_saveToDisk %></asp:LinkButton></span></div>
        <div style="height:25px;">
            <div id="hideModalPopupViaClientButton" class="Pro_Pop_Hide"><img src="/themes/standard/Images/closewindow.gif" alt="Close" style="vertical-align:middle;" /> <b><%= Resources.labels.sys_closeWindow %></b></div>
        </div>
    </asp:Panel>
    <div id="divPrint" class="Pro_Pop_Content">
        <asp:Literal runat="server" ID="ltHtmlForPrint"></asp:Literal>
    </div>
</asp:Panel><ajaxToolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup"
    BehaviorID="programmaticModalPopupBehavior"
    TargetControlID="lbViewPrint"
    PopupControlID="Panel1" 
    BackgroundCssClass="modalBackground"
    DropShadow="False" 
    CancelControlID="hideModalPopupViaClientButton"
    PopupDragHandleControlID="Panel3" >
</ajaxToolkit:ModalPopupExtender>为了让背景变灰，样式：
.modalPopup {background-color:#ffffff;border-width:8px;border-style:solid;border-color:#646263;padding:3px;width:800px;height:545px;}
.modalBackground {background-color:Gray;

Answer 4

ajax tool kit里面的ModalPopupExtender

Answer 5

点击Add然后触发后台事件，调用前台的js