jQuery UI Dialog | Popup
Here we are using jQuery ui dialog box and open that dialog on button click using jQuery
<html>
<head>
<title>jQuery UI Dialog | Popup</title>
<script src="Scripts/Jquery-ui/js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/Jquery-ui/js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<link href="Scripts/Jquery-ui/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet"/>
<scripttype="text/javascript">
$(document).ready(function() {
$(function() {
$("#dialog").dialog({
autoOpen:false,
modal:true,
width: 300,
height:200,
buttons: {
"Close":function () { $(this).dialog("close"); },
"Cancel":function () { $(this).dialog("close"); }
}
});
});
$("#btnOpen").click(function () {
$("#dialog").dialog("open");
});
});
</script>
</head>
<body>
<inputtype="button"id="btnOpen"value="Click For Open Dialog"/>
<divid="dialog"title="Dialog">
<tablewidth="250px">
<tr>
<td>Name :</td>
<tdalign="center"><inputtype="text"id="txtName"/></td>
</tr>
<tr>
<td>Email :</td>
<tdalign="center"><inputtype="text"id="txtEmail"/></td>
</tr>
</table>
</div>
</body>
</html>
Output :
If you want to open dialog box on page load then use following codes:
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$("#dialog").dialog({
autoOpen:true,
modal:true,
width: 300,
height:200,
buttons: {
"Close":function () { $(this).dialog("close"); },
"Cancel":function () { $(this).dialog("close"); }
}
});
});
});
Output:
