Here I am going make custom model popup with using JQuery. Its looks very Attractive rather than the simple alert box in Asp.Net.
In my application, i would like to use the popup window concept. When the user clciks a button, a popup window should appear, with a textbox to enter a value. on closing the popup window, the user entered value should get saved into a table.
Demo.aspx
You can download full Code from the below link.
In my application, i would like to use the popup window concept. When the user clciks a button, a popup window should appear, with a textbox to enter a value. on closing the popup window, the user entered value should get saved into a table.
Demo.aspx
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var triggers = $("#launch").overlay({
mask: {
color: '#000',
loadSpeed: 200,
opacity: 0.4
},
target: '#myModal',
closeOnClick: false
});
$(".promptButton.YesButton").click(function(){
$('#launch').html("Formatted, click to try again.");
});
$(".promptButton.NoButton").click(function(){
$('#launch').html("Ok we didn't format it, click to try again.");
});
});
</script>
<link href="modal.css" rel="stylesheet" />
</head>
<body>
<a id="launch" href="#">Launch Modal</a>
<div id="myModal" class="promptBox">
<span class="promptTitle">Are you sure you want to do that?</span>
<div class="promptContent"><p>Format hard disk?</p></div>
<button class="promptButton YesButton close">Yes, do it now</button>
<button class="promptButton NoButton close">No, I'm insane</button>
</div>
</body>
</html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var triggers = $("#launch").overlay({
mask: {
color: '#000',
loadSpeed: 200,
opacity: 0.4
},
target: '#myModal',
closeOnClick: false
});
$(".promptButton.YesButton").click(function(){
$('#launch').html("Formatted, click to try again.");
});
$(".promptButton.NoButton").click(function(){
$('#launch').html("Ok we didn't format it, click to try again.");
});
});
</script>
<link href="modal.css" rel="stylesheet" />
</head>
<body>
<a id="launch" href="#">Launch Modal</a>
<div id="myModal" class="promptBox">
<span class="promptTitle">Are you sure you want to do that?</span>
<div class="promptContent"><p>Format hard disk?</p></div>
<button class="promptButton YesButton close">Yes, do it now</button>
<button class="promptButton NoButton close">No, I'm insane</button>
</div>
</body>
</html>
You can download full Code from the below link.
I hope you like this article. Happy Coding.!!
No comments:
Post a Comment