1、将控件ToolkitScriptManager拖至页面中...
2、将控件UpdatePanel拖到页面中作为容器，以实现无刷新的效果...
3、添加Button，ID为"LinkButton1"...
4、添加ConfirmButtonExtender控件，设置该控件TargetControlID为LinkButton1
5、添加ModalPopupExtender控件，设置该控件TargetControlID为LinkButton1
6、查看LinkButton1的Extenders属性，详细设置ConfirmButtonExtender控件和ModalPopupExtender控件的其他必要参数。
设置ConfirmButtonExtender的DisplayModalPopupID为ModalPopupExtender控件ID；OnClientCancel:指定在客户端实现“取消”按钮事件的方法名。
设置ModalPopupExtender的属性：
CancelControlID为弹出页面中“取消”按钮ID，用于指示当用户点击弹出框中取消按钮时所做的事情。
OkControlID为弹出页面中“确定”按钮ID，用于指示当用户点击弹出框中确定按钮时所做的事情。
PopupControlID：指定弹出控件Panel的ID。
最后设定样式：BackgroundCssClass="modalBackground“
具体实现代码如下：
<body>
<script type='text/javascript'>
function cancelClick()
{
var label = $get('Label1');
label.innerHTML = 'You hit cancel in the Confirm dialog on ' + (new Date()).localeFormat("T") + '.';
}
</script>
<form id="form1" runat="server">
<div>
<cc1:toolkitscriptmanager id="ToolkitScriptManager1" runat="server"></cc1:toolkitscriptmanager>
<asp:UpdatePanel id="UpdatePanel1" runat="server">
<contenttemplate>
<asp:DataGrid ID="DataGrid1" runat="server" AutoGenerateColumns="False" ShowFooter="True"
Width="320px">
<Columns>
<asp:TemplateColumn FooterText="编号" HeaderText="编号">
<ItemTemplate>
<%#Container.ItemIndex+1%>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn FooterText="value值" HeaderText="value值">
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem,"MyProp")%>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn FooterText="text值" HeaderText="text值">
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem,"MyTextProp")%>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn FooterText="编辑" HeaderText="编辑">
<ItemTemplate>
<cc1:modalpopupextender id="ModalPopupExtender1" runat="server" targetcontrolid="LinkButton1" CancelControlID="ButtonCancel" OkControlID="ButtonOk" PopupControlID="PNL" BackgroundCssClass="modalBackground"></cc1:modalpopupextender>
<cc1:confirmbuttonextender id="ConfirmButtonExtender1" runat="server" displaymodalpopupid="ModalPopupExtender1"
targetcontrolid="LinkButton1" OnClientCancel="cancelClick"></cc1:confirmbuttonextender>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">编辑</asp:LinkButton>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
<asp:Panel ID="PNL" runat="server" Style="border-right: black 2px solid; padding-right: 20px;
border-top: black 2px solid; display: none; padding-left: 20px; padding-bottom: 20px;
border-left: black 2px solid; width: 200px; padding-top: 20px; border-bottom: black 2px solid;
background-color: white">
Are you sure you want to click the Button?
<br />
<br />
<div style="text-align: right">
<asp:Button ID="ButtonOk" runat="server" Text="OK" />
<asp:Button ID="ButtonCancel" runat="server" Text="Cancel" />
</div>
</asp:Panel><BR /> <asp:Label ID="Label1" runat="server" CssClass="lvjing" Font-Size="XX-Large" Height="57px" Text="暂无字" Width="707px"></asp:Label>
</contenttemplate>
</asp:UpdatePanel>
</div>
</form>
<br />
<br />
</body>
2、将控件UpdatePanel拖到页面中作为容器，以实现无刷新的效果...
3、添加Button，ID为"LinkButton1"...
4、添加ConfirmButtonExtender控件，设置该控件TargetControlID为LinkButton1
5、添加ModalPopupExtender控件，设置该控件TargetControlID为LinkButton1
6、查看LinkButton1的Extenders属性，详细设置ConfirmButtonExtender控件和ModalPopupExtender控件的其他必要参数。
设置ConfirmButtonExtender的DisplayModalPopupID为ModalPopupExtender控件ID；OnClientCancel:指定在客户端实现“取消”按钮事件的方法名。
设置ModalPopupExtender的属性：
CancelControlID为弹出页面中“取消”按钮ID，用于指示当用户点击弹出框中取消按钮时所做的事情。
OkControlID为弹出页面中“确定”按钮ID，用于指示当用户点击弹出框中确定按钮时所做的事情。
PopupControlID：指定弹出控件Panel的ID。
最后设定样式：BackgroundCssClass="modalBackground“
具体实现代码如下：
<body><script type='text/javascript'>
function cancelClick() {
var label = $get('Label1'); label.innerHTML = 'You hit cancel in the Confirm dialog on ' + (new Date()).localeFormat("T") + '.'; }</script> <form id="form1" runat="server"> <div> <cc1:toolkitscriptmanager id="ToolkitScriptManager1" runat="server"></cc1:toolkitscriptmanager> <asp:UpdatePanel id="UpdatePanel1" runat="server"> <contenttemplate> <asp:DataGrid ID="DataGrid1" runat="server" AutoGenerateColumns="False" ShowFooter="True" Width="320px"> <Columns> <asp:TemplateColumn FooterText="编号" HeaderText="编号"> <ItemTemplate> <%#Container.ItemIndex+1%> </ItemTemplate> </asp:TemplateColumn> <asp:TemplateColumn FooterText="value值" HeaderText="value值"> <ItemTemplate> <%#DataBinder.Eval(Container.DataItem,"MyProp")%> </ItemTemplate> </asp:TemplateColumn> <asp:TemplateColumn FooterText="text值" HeaderText="text值"> <ItemTemplate> <%#DataBinder.Eval(Container.DataItem,"MyTextProp")%> </ItemTemplate> </asp:TemplateColumn> <asp:TemplateColumn FooterText="编辑" HeaderText="编辑"> <ItemTemplate> <cc1:modalpopupextender id="ModalPopupExtender1" runat="server" targetcontrolid="LinkButton1" CancelControlID="ButtonCancel" OkControlID="ButtonOk" PopupControlID="PNL" BackgroundCssClass="modalBackground"></cc1:modalpopupextender> <cc1:confirmbuttonextender id="ConfirmButtonExtender1" runat="server" displaymodalpopupid="ModalPopupExtender1" targetcontrolid="LinkButton1" OnClientCancel="cancelClick"></cc1:confirmbuttonextender> <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">编辑</asp:LinkButton> </ItemTemplate> </asp:TemplateColumn> </Columns> </asp:DataGrid> <asp:Panel ID="PNL" runat="server" Style="border-right: black 2px solid; padding-right: 20px; border-top: black 2px solid; display: none; padding-left: 20px; padding-bottom: 20px; border-left: black 2px solid; width: 200px; padding-top: 20px; border-bottom: black 2px solid; background-color: white"> Are you sure you want to click the Button? <br /> <br /> <div style="text-align: right"> <asp:Button ID="ButtonOk" runat="server" Text="OK" /> <asp:Button ID="ButtonCancel" runat="server" Text="Cancel" /> </div> </asp:Panel><BR /> <asp:Label ID="Label1" runat="server" CssClass="lvjing" Font-Size="XX-Large" Height="57px" Text="暂无字" Width="707px"></asp:Label></contenttemplate> </asp:UpdatePanel> </div> </form> <br /> <br /></body>
