Modal Popup Extender Not Working

Question

I have this piece of code in my aspx page open a modal popup. I found this code online but for some reason the page refreshes and the popup does not appear. I tried several code snippets but the issue keeps on occurring. It must be an issue with my page.

This is my .aspx code

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
 <style type="text/css">
 .ModalPopupBG
{
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

.popup
{

    background:white;
}
</style>      
<script>
    function onAgree() {
        alert("Thank you for your approval")
    }
    function onDisagree() {
        alert("I appreciate your feedback; i will work harder next time")
    }
</script>
<div>
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>

    <p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

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

    <asp:Panel ID="Panel1" runat="server" CssClass ="popup">
        please give me your feedback about the paragraph above?
        <hr />
        <asp:Button ID="btnagree" runat="server" Text="Agree" />
        <asp:Button ID="btndisagree" runat="server" Text="Disagree" />
    </asp:Panel>
    <asp:ModalPopupExtender ID="ModalPopupExtender1" 
        runat="server" 
        TargetControlID ="Button1" 
        PopupControlID="Panel1"
         BackgroundCssClass="modalBackground" 
        DropShadow="true" 
        OkControlID="btnagree" 
        CancelControlID="btndisagree" 
        OnOkScript="onAgree()" 
        OnCancelScript ="onDisagree()">
        <Animations>
            <OnShown>
                <Fadein />       
            </OnShown>
            <OnHiding>
                <Fadeout />
            </OnHiding>
        </Animations>
    </asp:ModalPopupExtender>
</div>

</asp:Content>