Hi,
You can use ModalPopup to achieve it and use JavaScript to show it dynamically.
Please try the below sample:
You can use ModalPopup to achieve it and use JavaScript to show it dynamically.
Please try the below sample:
<script type="text/javascript"> function getTop(e) { var offset=e.offsetTop; if(e.offsetParent!=null) offset+=getTop(e.offsetParent); return offset; } function getLeft(e) { var offset=e.offsetLeft; if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); return offset; } function hideModalPopupViaClient() { var modalPopupBehavior = $find('ModalPopupExtender'); modalPopupBehavior.hide(); } function showModalPopupViaClient(control,id) { $get("inputBox").innerText="You choose the item "+control.innerHTML; var modalPopupBehavior = $find('ModalPopupExtender'); modalPopupBehavior.show(); $get(modalPopupBehavior._PopupControlID).style.left=getLeft($get('<%=DataList1.ClientID %>'))+ $get('<%=DataList1.ClientID %>').offsetWidth+"px"; $get(modalPopupBehavior._PopupControlID).style.top=getTop(control)+"px"; } </script> <body> <form id="form1" runat="server"> <ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" /> <input id="Hidden1" runat="server" type="hidden" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" > <ItemTemplate> <div style="border-color:Black;border-width:1px;border-style:solid;"> <asp:Label ID="Label1" Text='<%# Eval("CategoryID") %>' runat="server"></asp:Label> <asp:HyperLink ID="detail" runat="server" onmouseout="hideModalPopupViaClient()" onmouseover="showModalPopupViaClient(this)">'<%# Eval("CategoryID") %>'</asp:HyperLink> </div> </ItemTemplate> </asp:DataList> </ContentTemplate> </asp:UpdatePanel> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [Categories]"></asp:SqlDataSource> <asp:Button runat="server" ID="showModalPopupClientButton" style="display:none"/> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="showModalPopupClientButton" PopupControlID="programmaticPopup" RepositionMode="None" /> <br /> <div CssClass="modalPopup" id="programmaticPopup" style="background-color:#EEEEEE; filter:alpha(opacity=70);opacity:0.7;display:none;width:50px;padding:10px"> <span id="inputBox" ></span> <br /> </div> </form> </body>
No comments:
Post a Comment