如何在默认情况下选择“图像”按钮

Question

我使用pop-up为Ajax ModalPopupExtender做了一个程序，我将在其中显示一个弹出窗口，其中包含两个图像按钮YES和NO。现在我想要的是pop-up被打开时我想让YES Image button被选中，当用户按Enter YES时它应该采取相应的行动。如果用户按NO我想取消并关闭弹出窗口..

这是我的设计

<asp:UpdatePanel ID="updatepnl1" runat="server">
<ContentTemplate>
<asp:GridView runat="server" ID="gvDetails" CssClass="Gridview" DataKeyNames="UserId"
 AutoGenerateColumns="false">
 <HeaderStyle BackColor="#df5015" />
 <Columns>
 <asp:TemplateField HeaderStyle-BackColor="#EFF1F1" ItemStyle-HorizontalAlign="Center"
 ItemStyle-Height="25" HeaderStyle-Width="50" ItemStyle-Width="50" HeaderStyle-Font-Bold="true">
 <ItemTemplate>
   <asp:CheckBox ID="chkBoxChild" runat="server" />
 </ItemTemplate>
 </asp:TemplateField>
          <asp:BoundField DataField="UserName" HeaderText="UserName" />
          <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
         <asp:BoundField DataField="LastName" HeaderText="LastName" />
    <asp:TemplateField>
      <ItemTemplate>
       <asp:ImageButton ID="btnDelete" ImageUrl="~/Images/Delete.png" runat="server" OnClick="btnDelete_Click" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <asp:Label ID="lblresult" runat="server" />
            <asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
            <ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowPopup"
                PopupControlID="pnlpopup" CancelControlID="btnNo" BackgroundCssClass="modalBackground">
            </ajax:ModalPopupExtender>
            <asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="100px" Width="400px"
                Style="display: none">
                <table width="100%" style="border: Solid 2px #999; width: 100%; height: 100%" cellpadding="0"
                    cellspacing="0">
                    <tr style="background-image: url(Images/title.gif)">
                        <td style="height: 10%; color: Black; padding: 2px; font-size: larger; font-family: Arial"
                            align="center">
                            Confirm Box
                        </td>
                        <td style="color: White; font-weight: bold; padding: 3px; font-size: larger" align="Right">
                            <a href="javascript:void(0)" onclick="closepopup()">
                                <img src="Images/x.png" style="border: 0px" align="right" /></a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="left" style="padding: 5px; font-family: Calibri">
                            <asp:Label ID="lblUser" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right" style="padding-right: 15px">
                            <asp:ImageButton ID="btnYes" OnClick="btnYes_Click" runat="server" ImageUrl="~/Images/btnyes.jpg" />
                            <asp:ImageButton ID="btnNo" runat="server" ImageUrl="~/Images/btnNo.jpg" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>

对于第二个我得到这个并且完美地工作可以任何人给我解决Enter

function pageLoad(sender, args) {
            if (!args.get_isPartialLoad()) {
                //  add our handler to the document's
                //  keydown event
                $addHandler(document, "keydown", onKeyDown);
            }
        }

        function onKeyDown(e) {
            if (e && e.keyCode == Sys.UI.Key.esc) {
                // if the key pressed is the escape key, dismiss the dialog
                $find('ModalPopupExtender1').hide();
            }
        } 

Answer 1

毕竟我得到了以下脚本的解决方案

<script type="text/javascript">

    function pageLoad(sender, args) {
        $find('ModalPopupExtender1').add_shown(OnModalPopup);
        if (!args.get_isPartialLoad()) {
            //  add our handler to the document's
            //  keydown event
            $addHandler(document, "keydown", onKeyDown);

        }
    }

    function onKeyDown(e) {
        if (e && e.keyCode == Sys.UI.Key.esc) {
            // if the key pressed is the escape key, dismiss the dialog
            $find('ModalPopupExtender1').hide();
        }
    }
    function OnModalPopup(e) {
        $get('<%= btnYes.ClientID %>').focus();
    }

</script>

Answer 2

面板控件允许您在其内容范围内定义默认按钮：

<asp:Panel ID="pnlpopup" runat="server" DefaultButton="btnYes">