帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:modal-popup  submitting  弹出  POP  Enter  KEY  JAVA  modal  


介绍

下面是如何在输入/esc按键时提交/关闭 AjaxModalPopup 框的方法。 AjaxModalPopup 在许多网页中经常被使用。 下面是一个使你的web应用程序感觉像 Windows 应用程序的解决方案。 你可以以在输入键上提交 AjaxModalPopup,并在Esc键按键上关闭 AjaxModalPopup

Background

本文扩展了AJAX控件工具箱 ModalPopupExtender

使用代码

下面是扩展AJAX控件工具箱 ModalPopupExtender的JavaScript 。

<script language="javascript" type="text/javascript">
 function body_onkeydown() 
 {
 if(event.keyCode==13 || event.keyCode==27) 
 {
 var _defaultButtonName=getDefautButtonName( event.keyCode==13? 
 "submitButton" : "cancelButton");
 var frm=document.forms[0];
 if(frm && document.all(_defaultButtonName))
 {
 document.all(_defaultButtonName).click();
 }
 }
 }
 function getDefautButtonName(className) 
 {
 var _defaultButtonName="";
 var children = document.getElementsByTagName("input");
 for (var i = 0; i <children.length; i++) 
 {
 var child = children[i];
 var btnAction = child.buttonAction;
 if(btnAction == className)
 {
 _defaultButtonName = child.id;
 break;
 }
 }
 return _defaultButtonName;
 }
</script>
<body onkeydown="body_onkeydown()">
 <form id="form1" runat="server">
 <div>
 <asp:Panel ID="pnlmain" runat="server">
 <table>
 <tr>
 <td colspan="2">
 Name : <asp:TextBox ID="txtUserNmae" 
 runat="server"></asp:TextBox></td></tr> <tr>
 <td colspan="2">
 Pwd : <asp:TextBox ID="txtPwd" 
 runat="server"></asp:TextBox></td></tr> <tr>
 <td>
 <asp:Button ID="btnSubmit" runat="server" 
 Text="Ok" buttonAction="submitButton"/>
 </td> <td>
 <asp:Button ID="btnCancel" runat="server" 
 Text="Cancel" buttonAction="cancelButton"/>
 </td></tr></table></asp:Panel></div> <div>
 <asp:Button ID="btnPopup" runat="server" Text="Popup"/>
 <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
 </cc1:ToolkitScriptManager> <cc1:ModalPopupExtender ID="ModalPopupExtender1" 
 runat="server" CancelControlID="btnCancel" 
 OkControlID="btnSubmit" PopupControlID="pnlmain" 
 TargetControlID="btnPopup">
 </cc1:ModalPopupExtender></div></form></body>

单击 modal modal模式弹出控件的按钮,在这里添加一个自定义属性,我们设置按钮的OK和按钮的Cancel buttonAction="cancelButton"



文章标签:JAVA  Javascript  KEY  POP  弹出  Enter  modal  modal-popup  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语