I few observations:
- You need to move the ModalPopupExtender control outside the Panel that you are using for the modal popup (pnlpopup, in your case).
- Once you do that, you'llneed to change your CancelControlID to
UpdatePanel2$btncancel
(otherwise your ModalPopupExtender won't be able to find the "btncancel" control inside that UpdatePanel). - You also need to move the control you're using as the "TargetControlID" (btnshowpopup, in your case) outside of the modal popup control.
So your markup should look like this:
<asp:Panel ID="pnlpopup" runat="server" Width="500px" style="display:none">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False"
DataKeyNames="Stu_id" Height="50px" Width="125px">
<Fields>
<asp:BoundField DataField="Stu_id" HeaderText="ID" />
<asp:BoundField DataField="Fullname" HeaderText="Fullname" />
<asp:BoundField DataField="Username" HeaderText="Username" />
<asp:BoundField DataField="Email" HeaderText="Email" />
</Fields>
</asp:DetailsView>
<div id="div1" style="display:none">
<asp:Button ID="btncancel" runat="server" Text="cancel" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:ModalPopupExtender ID="mdlpopup" runat="server"
TargetControlID="btnshowpopup" PopupControlID="pnlpopup"
CancelControlID="UpdatePanel2$btncancel" BackgroundCssClass="pop">
</asp:ModalPopupExtender>
<asp:Button ID="btnshowpopup" runat="server"/>
I would also change the order of the "Update" and "Show" commands in your codebaheind file. I don't think it will make any difference, but it is definitely more logical:
this.mdlpopup.Show();
this.UpdatePanel2.Update();