Ajax modal popup extender doesn't work and displays the panel on page load

I need to popup a panel and display it in an ajax modal popup. but somehow it's not working the way it suppose to ! i need to invoke the modalpopupextender by clicking on the button but when i load the page it's just displays everything and nothing happens by clicking on the button.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"TagPrefix="ajaxToolkit" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.modalBackground
{
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}
.modalPopup
{
    background-color: #ffffdd;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 3px;
    width: 250px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
     <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>

  <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<asp:Button ID="Button1" runat="server" Text="Button" />


<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
    BackgroundCssClass="modalBackground"
    PopupControlID="Panel1"
    TargetControlID="Button1"
    CancelControlID="BtnClose"
    OkControlID="BtnOK"
    ></ajaxToolkit:ModalPopupExtender>        
    <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup">
    <h2>this is modal popup</h2>
    <p> update data ?</p><br />
    <asp:Button ID="BtnClose" runat="server" Text="Cancel" />
    <asp:Button ID="BtnOK" runat="server" Text="OK" />
</asp:Panel>
<br />
</form>
</body>
</html>

this is how it looks:

enter image description here

Solution

ajaxToolkit doesn't work very well (I already had a lot of problems with it)! Try on use prettyPhoto:

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/