Andrew Pallant

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>  

The post Simple JS Dialog appeared first on Software Developer In London.