No replies
cyberpine
cyberpine's picture
Offline
newbie
Miami
Last seen: 7 years 31 weeks ago
Miami
Timezone: GMT-4
Joined: 2013-04-27
Posts: 1
Points: 2

I have this asp.net page with an Ajax popup. I've been unable to get CSS to alter it's position and the close button.

As is,the popup image always shows up in the middle of the page, I'd like it to show up about 100px from top and from left. I'd also like the web page to dim/darken with the image is up. The close button is showing up as a button outside of the image in the lower right. I'd like to be the text [x] in the upper right inside the popup image. Also, I'd like clicking ont the image to close the popup return the page to it's normal look.

Can I do all of that with CSS and will it work with major PC,Mac and Mobile browsers? I tried adding CSS tags to controls, but nothing happens.

Thank You.

Here's the asp.net code.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
 
 
 
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> 
        </asp:ToolkitScriptManager> 
        <script type="text/javascript">
            function ShowFullImg(url) {
                var img = $get("<%=Image1.ClientID %>");
                img.src = url;
                //img.arguments = 'Style="position:absolute;left:0px;top:0px;width:500px;height:400px;border-style:double"'
                $find("MPEImage").show();
            }
        </script> 
 
 
        <asp:Panel ID="PnlImage" runat="server" > 
            <asp:Image ID="Image1" runat="server" /> 
            <asp:Button ID="btnClose" runat="server" Text="Close" /> 
        </asp:Panel> 
 
        <asp:Button ID="BtnHidden" runat="server" Text="Hidden" Style="display: none" /> 
        <asp:ModalPopupExtender ID="ModalPopupExtender1" TargetControlID="BtnHidden" PopupControlID="PnlImage" 
            BehaviorID="MPEImage" CancelControlID="btnClose" runat="server"> 
        </asp:ModalPopupExtender> 
 
 
       <ASP:DataList id="repeater1"  runat="server" repeatdirection="Horizontal" RepeatLayout="Table" Repeatcolumns="5"> 
            <ItemTemplate> 
 
 
 <asp:ImageButton ID="ThumbnailImg" ImageUrl='<%# Eval("n1") %>' Height="100" Width="150" BorderStyle="Ridge"   OnClientClick='<%# Eval("n2","ShowFullImg(\"{0}\");return false;") %>' 
                    runat="server" />                          
 
      </ItemTemplate>
        </asp:DataList>
 
 
</asp:Content>