Popup WIndow : The Official Microsoft ASP.NET Forums

Reply

mrhammad

Member

2 Points

Popup WIndow

Apr 26, 2012 05:10 AM|LINK

i am displying image Thumbnail in DataList and opening a Web Form as Popup to preview image when use clicks on any thumnail by using the following script

The popup form is really ugly, seems like a browser window. i want to make it more sophisticated. what could you advice me to make it more beautiful just like many other image preview screens? or is there any control available for that?

Hammad Nasir

Reply

somnathmali

Contributor

2816 Points

450 Posts

Re: Popup WIndow

Apr 26, 2012 05:12 AM|LINK

dont use popup , use jquery plugin lignhtbox - its cool

http://lokeshdhakar.com/projects/lightbox2/

Somnath Mali
.NET Developer , Pune INDIA.
Please Mark As Answer If my reply helped you.

Edited by somnathmali on Apr 26, 2012 05:12 AM

Reply

amit.jain

Star

11225 Points

1815 Posts

Re: Popup WIndow

Apr 26, 2012 05:12 AM|LINK

you can use modalpopupextender

http://csharpdotnetfreak.blogspot.com/2011/03/ajax-modalpopupextender-example-aspnet.html

or jquery popup

http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/

Don't say thanks rather mark my reply as "Answer" if it helps you
amiT jaiN

ASP.NET C# VB Articles And Code Examples

Edited by amit.jain on Apr 26, 2012 05:13 AM
Edited by amit.jain on Jun 12, 2012 09:14 AM
Edited by amit.jain on Jun 19, 2012 01:10 PM

Reply

mrhammad

Member

2 Points

66 Posts

Re: Popup WIndow

Apr 27, 2012 07:00 AM|LINK

i want to open the popup from the ListView Template field ? @amit

I tried the links above but still no luck

Hammad Nasir

Edited by mrhammad on Apr 27, 2012 07:04 AM

Reply

amit.jain

Star

11225 Points

1815 Posts

Re: Popup WIndow

Apr 27, 2012 09:26 AM|LINK

Hi i tried to create a sample code for you , it's working good for me, you can work out for image urls as i have used only one for every image

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
    .modalBackground
{
	background-color: Gray;
	filter: alpha(opacity=50);
	opacity: 0.50;
}
.pnl
{
	border-width: 1px;
	border-style: solid;
	background-color: #FFFFFF;
	position: absolute;
	width: 400px;
	height: 300px;
}
.close {
    DISPLAY: block;BACKGROUND: url(Images/close.png) no-repeat 0px 0px;
    LEFT: -5px;WIDTH: 26px;TEXT-INDENT: -1000em;POSITION: absolute;
    TOP: -7px;HEIGHT: 26px;
}
    </style>
     
</head>
<body>
    <form id="form1" runat="server">
    
    
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
            <LayoutTemplate>
            <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
            </LayoutTemplate>
            <ItemTemplate>
           <asp:ImageButton ID="btn" runat="server" ImageUrl="~/Thumbnail/hills_Thumb.jpg" OnClick="btnClick"/>
            </ItemTemplate>
        
        </asp:ListView>
    
        
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [ProductName] FROM [Alphabetical list of products]">
        </asp:SqlDataSource>
    <asp:Button runat="server" ID="btnModalPopUp"
            style="display:none"/>
    <asp:ModalPopupExtender runat="server"
                   ID="modelPopupExtender1"
                   TargetControlID="btnModalPopUp"
                   PopupControlID="popUpPanel"
                   BackgroundCssClass="modalBackground" >
</asp:ModalPopupExtender>
<asp:Panel ID="popUpPanel" runat="server"
           CssClass="pnl">
<asp:Image ID="imgPopup" runat="server" ImageUrl="~/Images/hills.jpg" />

<asp:LinkButton ID="LinkButton1" runat="server"
                CssClass="close"
OnClientClick="$find('modelPopupExtender1').hide(); return false;"/>

</asp:Panel>
        </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        
    </div>
    </form>
</body>
</html>

Write this code in code behind

protected void btnClick(object sender, EventArgs e) { modelPopupExtender1.Show(); }

Source code https://www.box.com/s/f737f250a4f99c4f03a0

Don't say thanks rather mark my reply as "Answer" if it helps you
amiT jaiN

ASP.NET C# VB Articles And Code Examples

Edited by amit.jain on Apr 27, 2012 09:28 AM
Edited by amit.jain on Apr 27, 2012 09:36 AM

Reply

mrhammad

Member

2 Points

66 Posts

Re: Popup WIndow

Apr 27, 2012 11:54 AM|LINK

Click Event never fires? its not openeing modal popup? So basically inside ListView Template its not working. if i take out this image and put somewhere else in div then it works fine.

Hammad Nasir

Edited by mrhammad on Apr 27, 2012 12:04 PM
Edited by mrhammad on Apr 27, 2012 12:04 PM

Reply

mrhammad

Member

2 Points

66 Posts

Re: Popup WIndow

Apr 30, 2012 07:09 AM|LINK

@amit , i tried your solution, works great but there is little problem. i have changed to PopupPanel to accomadate the DataList in it as shown below. DataList is filled with image thumbnails and it works fine but when i try to click on any image , popup hides , i dont know why this is happening even i remove any logic behind the Datalist but it still hides automatically?

                <asp:Panel ID="popUpPanel" runat="server" CssClass="pnl">
                    <table>
                        <tr>
                            <td>
                                <asp:Image ID="imgPopup" runat="server" ImageUrl="~/images/folder.png" />
                                <asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find('modelPopupExtender1').hide(); return false;"/>
                            </td>

                            <td style="width:150px;background:black;vertical-align:top">
                                <asp:DataList ID="grdThumbnails" runat="server" AutoGenerateColumns="false" RepeatColumns="1" RepeatDirection="Vertical">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="Label1" runat="server" Height="60" Width="60" style="margin:5px" ImageUrl='<%# Bind("PictureURL") %>' OnClick="Change" CommandArgument='<%# Eval("PictureURL") %>' />
                                    </ItemTemplate>
                            </asp:DataList>
                            </td>
                        </tr>

                    </table>
                </asp:Panel>

Hammad Nasir

Edited by mrhammad on Apr 30, 2012 07:09 AM

Reply

amit.jain

Star

11225 Points

1815 Posts

Re: Popup WIndow

Apr 30, 2012 07:28 AM|LINK

Hi you need to put DataList out of Panel

<asp:Panel ID="popUpPanel" runat="server" CssClass="pnl">
                    <table>
                        <tr>
                            <td>
                                <asp:Image ID="imgPopup" runat="server" ImageUrl="~/images/folder.png" />
                                <asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find('modelPopupExtender1').hide(); return false;"/>
                            </td></tr></table>

</asp:Panel>

<td style="width:150px;background:black;vertical-align:top">
                                <asp:DataList ID="grdThumbnails" runat="server" AutoGenerateColumns="false" RepeatColumns="1" RepeatDirection="Vertical">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="Label1" runat="server" Height="60" Width="60" style="margin:5px" ImageUrl='<%# Bind("PictureURL") %>' OnClick="Change" CommandArgument='<%# Eval("PictureURL") %>' />
                                    </ItemTemplate>
                            </asp:DataList>
                            </td>
                        </tr>

                    </table>

<asp:Button runat="server" ID="btnModalPopUp" OnClick="btnCLick"
style="display:none"/>

In code behind, click event of button you can pass image url to image control

protected void btnClick(object sender, EventArgs e)
{
imgPopup.ImageUrl = "yourImageUrl";
modelPopupExtender1.Show();
}

Don't say thanks rather mark my reply as "Answer" if it helps you
amiT jaiN

ASP.NET C# VB Articles And Code Examples

Marked as answer by mrhammad on Apr 30, 2012 08:56 AM

Reply

mrhammad

Member

2 Points

66 Posts

Re: Popup WIndow

Apr 30, 2012 07:39 AM|LINK

Making this, wont show this datalist ( list of thumbnail images) together with popup.

I want to show this popup in such a way that , there would be a main image on left side and list of thumnail images on right side as DataList.

Click on any thumbnail image will change main image.

Hammad Nasir

Reply

mrhammad

Member

2 Points

66 Posts

Re: Popup WIndow

Apr 30, 2012 08:57 AM|LINK

Resolved. thanks

Hammad Nasir

Popup WIndow RSS

10 replies

mrhammad

Popup WIndow

somnathmali

Re: Popup WIndow

amit.jain

Re: Popup WIndow

mrhammad

Re: Popup WIndow

amit.jain

Re: Popup WIndow

mrhammad

Re: Popup WIndow

mrhammad

Re: Popup WIndow

amit.jain

Re: Popup WIndow

mrhammad

Re: Popup WIndow

mrhammad

Re: Popup WIndow

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft