Home > ASP.Net, Javascript, Jquery > Open JQuery Dialog Modal on F9 Key Press

Open JQuery Dialog Modal on F9 Key Press


Hi all,

try this example to open jquery dialog modal on F9 key press


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="_Default" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
 <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript">
 $(function() {
 $(document).keyup(function(e) {
 var key = (e.keyCode ? e.keyCode : e.charCode);
 switch (key) {
 case 120: // f9 key
 $(".dialog").dialog({
 title: "jQuery Dialog Title",
 buttons: [{
 text: "اغلاق",
 click: function() {
 $(this).dialog("close");
 }
 }],
 modal: true,
 width: 300,
 hieght: 100,
 resizable: false,
 closeOnEscape: true
 });
 break;
 default: ;
 }
 });
 });
</script>
</head>
<body>
 <form id="form1" runat="server">
 <div id="dialog" class="dialog" style="display:none">
 This is JQuery Dialog
 </div>
 </form>
</body>
</html>

Hope this helps

Good Luck.

Advertisements
Categories: ASP.Net, Javascript, Jquery
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: