Simple JS Dialog
Published: Jun 24, 2015 01:48:31
Physical Link: Simple JS Dialog
Keeping in the spirit of using my blog as a quick code repository; sometimes you just need a simple easy to implement dialog box. I have been using the following routine for sometime now. Sometimes you just need a simple piece of code to get the project done. This although is very simple, it does the job perfectly. It is not how I often style it, but you can figure that out.
See Working Copy: view & try
Download Sample: download
See Code Below:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<button id="btn-sample">View Sample</button>
<div id="msgBox"></div>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/jquery-ui.js"></script>
<link href="Scripts/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$("#btn-sample").click(function () {
messagebox("This is a sample...", "Message Box Title", function () {
alert('custom functions go here');
});
});
});
function messagebox(msg, title, func)
{
$("#msgBox").html("<br/>" + msg + "<br/>")
.dialog({
resizable: false,
modal: true,
title: title,
width: 400,
buttons: {
"OK": function () {
$(this).dialog('close');
}
},
close: function (event, ui) {
$(this).dialog('destroy').remove();
if (func) func();
}
});
}
</script>
</body>
</html>
Author: Andrew PallantCategories: Developement, jQuery