jQuery Alert and Dialog Box
 |
| jQuery Alert and Dialog Box |
Hi friends today we are going to learn jQuery Alert and Dialog Box.
How to Alert using Jquery
use the below Codes to Alert using Jquery
1. index.html
<html>
<head>
<title>Jquery alert</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$('#alert').click(function(){
var action = confirm("Press a button!");
if (action == true) {
alert("You pressed OK!");
} else {
alert("You pressed Cancel!");
window.location.href = "https://www.codenair.com/";
}
});
});
</script>
</head>
<h3>Jquery Alert</h3>
<input type="button" id="alert" value="Alert Me"/>
</html>
Now we will learn jquery dialog box using jquery ui..
index.html
 |
| jQuery Alert and Dialog Box |
Use The below codes to perform jquery dialog box action..
<html>
<head>
<title>jQuery UI Dialog</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#dialog{
display:none;
}
#content{
width:600px;
margin:auto;
}
</style>
<script>
$(document).ready(function(){
$('#popup').click(function(){
$( "#dialog" ).dialog();
$("#dialog").css("display", "inline");
});
});
</script>
</head>
<body>
<div id="content">
<h3>JQuery Dialog Box</h3>
<div id="dialog" title="Basic dialog">
<p>Welcome To CodeNair.com. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<input type="button" id="popup" value="Show Alert"/>
</div>
</body>
</html>
That's it Friends how to create jquery alert and jquery dialog box...
Keep visiting Thank You..
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.