{"id":1528,"date":"2015-06-23T21:48:31","date_gmt":"2015-06-24T01:48:31","guid":{"rendered":"http:\/\/andrewpallant.ca\/wordpress\/?p=1528"},"modified":"2015-06-23T21:49:29","modified_gmt":"2015-06-24T01:49:29","slug":"simple-js-dialog","status":"publish","type":"post","link":"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/","title":{"rendered":"Simple JS Dialog"},"content":{"rendered":"

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.<\/p>\n

See Working Copy: view & try<\/a><\/p>\n

Download Sample: download<\/a><\/p>\n

See Code Below:<\/p>\n

 <!DOCTYPE html>  \r\n <html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">  \r\n <head>  \r\n   <title><\/title>  \r\n <\/head>  \r\n <body>  \r\n   \r\n   <button id=\"btn-sample\">View Sample<\/button>  \r\n   \r\n   <div id=\"msgBox\"><\/div>  \r\n   \r\n   <script src=\"Scripts\/jquery-1.10.2.js\"><\/script>  \r\n   <script src=\"Scripts\/jquery-ui.js\"><\/script>  \r\n   <link href=\"Scripts\/jquery-ui.css\" rel=\"stylesheet\" \/>  \r\n   \r\n   <script type=\"text\/javascript\">  \r\n     $(document).ready(function () {  \r\n       $(\"#btn-sample\").click(function () {  \r\n         messagebox(\"This is a sample...\", \"Message Box Title\", function () {  \r\n           alert('custom functions go here');  \r\n         });  \r\n       });  \r\n     });  \r\n   \r\n   function messagebox(msg, title, func)  \r\n   {  \r\n     $(\"#msgBox\").html(\"<br\/>\" + msg + \"<br\/>\")  \r\n       .dialog({  \r\n       resizable: false,  \r\n       modal: true,  \r\n       title: title,  \r\n       width: 400,  \r\n       buttons: {  \r\n         \"OK\": function () {  \r\n           $(this).dialog('close');  \r\n         }  \r\n       },  \r\n       close: function (event, ui) {  \r\n         $(this).dialog('destroy').remove();  \r\n         if (func) func();  \r\n       }  \r\n     });  \r\n   }  \r\n   <\/script>  \r\n <\/body>  \r\n <\/html>  \r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading Simple JS Dialog<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[141,149],"tags":[],"yoast_head":"\r\nSimple JS Dialog - Software Developer in London @LdnDeveloper<\/title>\r\n<meta name=\"description\" content=\"Keeping in the spirit of using my blog as a quick code repository; sometimes you just need a simple easy to implement dialog box.\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Simple JS Dialog - Software Developer in London @LdnDeveloper\" \/>\r\n<meta property=\"og:description\" content=\"Keeping in the spirit of using my blog as a quick code repository; sometimes you just need a simple easy to implement dialog box.\" \/>\r\n<meta property=\"og:url\" content=\"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/\" \/>\r\n<meta property=\"og:site_name\" content=\"LDNDeveloper\" \/>\r\n<meta property=\"article:published_time\" content=\"2015-06-24T01:48:31+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2015-06-24T01:49:29+00:00\" \/>\r\n<meta name=\"author\" content=\"ldnDeveloper\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:creator\" content=\"@LdnDeveloper\" \/>\r\n<meta name=\"twitter:site\" content=\"@LdnDeveloper\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ldnDeveloper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/\"},\"author\":{\"name\":\"ldnDeveloper\",\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\"},\"headline\":\"Simple JS Dialog\",\"datePublished\":\"2015-06-24T01:48:31+00:00\",\"dateModified\":\"2015-06-24T01:49:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/\"},\"wordCount\":86,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\"},\"articleSection\":[\"Developement\",\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/\",\"url\":\"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/\",\"name\":\"Simple JS Dialog - Software Developer in London @LdnDeveloper\",\"isPartOf\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#website\"},\"datePublished\":\"2015-06-24T01:48:31+00:00\",\"dateModified\":\"2015-06-24T01:49:29+00:00\",\"description\":\"Keeping in the spirit of using my blog as a quick code repository; sometimes you just need a simple easy to implement dialog box.\",\"breadcrumb\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/andrewpallant.ca\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Simple JS Dialog\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#website\",\"url\":\"http:\/\/andrewpallant.ca\/wordpress\/\",\"name\":\"LDNDeveloper\",\"description\":\"Learning, Growing and Sharing.\",\"publisher\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/andrewpallant.ca\/wordpress\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\",\"name\":\"ldnDeveloper\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2017\/05\/cropped-AAEAAQAAAAAAAAXQAAAAJDQxMGRlMzFjLWM4ODctNDk1NC05M2EyLWE1NDNhNTRiZjVlYw-2.jpg\",\"contentUrl\":\"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2017\/05\/cropped-AAEAAQAAAAAAAAXQAAAAJDQxMGRlMzFjLWM4ODctNDk1NC05M2EyLWE1NDNhNTRiZjVlYw-2.jpg\",\"width\":512,\"height\":512,\"caption\":\"ldnDeveloper\"},\"logo\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/image\/\"},\"description\":\"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\",\"sameAs\":[\"http:\/\/www.andrewpallant.ca\",\"https:\/\/x.com\/LdnDeveloper\"],\"url\":\"http:\/\/andrewpallant.ca\/wordpress\/author\/ldndeveloper\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Simple JS Dialog - Software Developer in London @LdnDeveloper","description":"Keeping in the spirit of using my blog as a quick code repository; sometimes you just need a simple easy to implement dialog box.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/","og_locale":"en_US","og_type":"article","og_title":"Simple JS Dialog - Software Developer in London @LdnDeveloper","og_description":"Keeping in the spirit of using my blog as a quick code repository; sometimes you just need a simple easy to implement dialog box.","og_url":"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/","og_site_name":"LDNDeveloper","article_published_time":"2015-06-24T01:48:31+00:00","article_modified_time":"2015-06-24T01:49:29+00:00","author":"ldnDeveloper","twitter_card":"summary_large_image","twitter_creator":"@LdnDeveloper","twitter_site":"@LdnDeveloper","twitter_misc":{"Written by":"ldnDeveloper","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/#article","isPartOf":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/"},"author":{"name":"ldnDeveloper","@id":"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84"},"headline":"Simple JS Dialog","datePublished":"2015-06-24T01:48:31+00:00","dateModified":"2015-06-24T01:49:29+00:00","mainEntityOfPage":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/"},"wordCount":86,"commentCount":0,"publisher":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84"},"articleSection":["Developement","jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/","url":"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/","name":"Simple JS Dialog - Software Developer in London @LdnDeveloper","isPartOf":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/#website"},"datePublished":"2015-06-24T01:48:31+00:00","dateModified":"2015-06-24T01:49:29+00:00","description":"Keeping in the spirit of using my blog as a quick code repository; sometimes you just need a simple easy to implement dialog box.","breadcrumb":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/andrewpallant.ca\/wordpress\/simple-js-dialog\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/andrewpallant.ca\/wordpress\/"},{"@type":"ListItem","position":2,"name":"Simple JS Dialog"}]},{"@type":"WebSite","@id":"http:\/\/andrewpallant.ca\/wordpress\/#website","url":"http:\/\/andrewpallant.ca\/wordpress\/","name":"LDNDeveloper","description":"Learning, Growing and Sharing.","publisher":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/andrewpallant.ca\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84","name":"ldnDeveloper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/image\/","url":"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2017\/05\/cropped-AAEAAQAAAAAAAAXQAAAAJDQxMGRlMzFjLWM4ODctNDk1NC05M2EyLWE1NDNhNTRiZjVlYw-2.jpg","contentUrl":"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2017\/05\/cropped-AAEAAQAAAAAAAAXQAAAAJDQxMGRlMzFjLWM4ODctNDk1NC05M2EyLWE1NDNhNTRiZjVlYw-2.jpg","width":512,"height":512,"caption":"ldnDeveloper"},"logo":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/image\/"},"description":"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","sameAs":["http:\/\/www.andrewpallant.ca","https:\/\/x.com\/LdnDeveloper"],"url":"http:\/\/andrewpallant.ca\/wordpress\/author\/ldndeveloper\/"}]}},"_links":{"self":[{"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts\/1528"}],"collection":[{"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/comments?post=1528"}],"version-history":[{"count":4,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts\/1528\/revisions"}],"predecessor-version":[{"id":1532,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts\/1528\/revisions\/1532"}],"wp:attachment":[{"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/media?parent=1528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/categories?post=1528"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/tags?post=1528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}