Reputation: 8656
I have done a program for a pop-up
using Ajax ModalPopupExtender
where I will show a pop-up with two image buttons namely YES
and NO
. Now what I would like to have is when the pop-up
was opened I would like to make YES
Image button
get selected and when ever user press Enter
on YES
it should take corresponding action. If the user press NO
I would like to cancel and close the pop-up..
This is my design
<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>
For the second i get this and working perfectly can any one give me solution for that 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();
}
}
Upvotes: 0
Views: 531
Reputation: 8656
After all i got the solution with the following script
<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>
Upvotes: 1
Reputation: 429
The panel control allows you to define a default button within the scope of it's contents:
<asp:Panel ID="pnlpopup" runat="server" DefaultButton="btnYes">
Upvotes: 0