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>  

Andrew Pallant (@LdnDeveloper) has been a web, database and desktop developer for over 16 years. Andrew has worked on projects that ranged from factory automation to writing business applications. Most recently he has been heavily involved in various forms for ecommerce projects. Over the years Andrew has worn many hats: Project Manager, IT Manager, Lead Developer, Supervisor of Developers and many more - See more at: http://www.unlatched.com/#sthash.8DiTkpKy.dpuf

Posted in Developement, jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *

*