Home > AJAX, ASP.Net > AJAX ModalPupup Extender with static Image

AJAX ModalPupup Extender with static Image


Try this example:

.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">

<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" >
<head runat="server">
    <title>Change Picture</title>
    <style>
        .modalBackground {
        background-color:Gray;
        filter:alpha(opacity=70);
        opacity:0.7;
        }

        .modalPopup {
        background-color:#FFD9D5;
        border-width:3px;
        border-style:solid;
        border-color:Gray;
        padding:3px;
      
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
       
        <asp:Image ID="Image1" runat="server" ImageUrl="images/040720070325170a1ul1.jpg" imgUrl="images/040720070325170a1ul1.jpg" onclick="changePicture(event.srcElement.imgUrl)"/>
        <asp:Image ID="Image2" runat="server"  ImageUrl="~/images/ahly.jpg" imgUrl="images/ahly.jpg" onclick="changePicture(event.srcElement.imgUrl)" Height="102px" Width="85px"/>
        <asp: Panel ID="Panel1" runat="server" CssClass="modalPopup" style="display:none">
            <asp:Image ID="Image3" runat="server"/>
            <br />
            <br />
            <asp:Button ID="Button2" runat="server" Text="Cancel" />
        </asp: Panel>
        <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1" PopupControlID="Panel1" CancelControlID="Button2">
        </cc1:ModalPopupExtender>
        <div style="display:none">
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
       
        <script type="text/javascript" language="javascript">
            function changePicture(imgUrl){
                $get("<%=Image3.ClientID %>").src = imgUrl;
                $get("<%=Button1.ClientID %>").click();
            }
        </script>
    </div>
    </form>
</body>
</html>

Good Luck

Advertisements
Categories: AJAX, ASP.Net
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: