how we use a popup control

Last post 09-09-2008 5:55 AM by Vince Xu - MSFT. 1 replies.

Sort Posts:

  • how we use a popup control

    09-06-2008, 12:34 AM

    <p>

    HELLO i have a datalist and bound with hyperlink .when i click on perticuler hyperlink ,it will open a window with regarding details,i want show this detail on mouse over in ajax popup control,but i getting fail bcoz popup need a control id while hyperlink a child control of datalist control. how i will resolve this problem thanks in advance 4 appropriate solution

    </p>

     

  • Re: how we use a popup control

    09-09-2008, 5:55 AM
    Answer

    Hi,

    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>
     

    Vince Xu
    Microsoft Online Community Support
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
Page 1 of 1 (2 items)