{"id":1342,"date":"2014-09-01T13:48:26","date_gmt":"2014-09-01T17:48:26","guid":{"rendered":"http:\/\/andrewpallant.ca\/wordpress\/?p=1342"},"modified":"2014-09-01T13:49:10","modified_gmt":"2014-09-01T17:49:10","slug":"sample-modal-revisited","status":"publish","type":"post","link":"http:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/","title":{"rendered":"Sample Modal Revisited"},"content":{"rendered":"

This is a simple yet easy to modify sample of doing a simple HTML modal popup.<\/p>\n

\"modal<\/a>
\n
\nI and a couple of my colleagues have been using this example of a modal prompt as quick solution for our every day work. \u00a0This past week I have seen this show up in 3 different projects. \u00a0\u00a0I recently implemented this in 5 minutes and tweaked it as a dynamic content display in about 15 minutes with a custom look. \u00a0Modal dialogues or prompts are being used more and more by my team to display information, video, prompts and more. \u00a0Two\u00a0months ago I used ago I used a variation of this example to show HTML5 video used for training.<\/p>\n

<\/div>\n

View Example: http:\/\/ldndeveloper.com\/sample\/modalprompt\/modalprompt.htm<\/a>
\nDowload Example: http:\/\/ldndeveloper.com\/sample\/modalprompt\/modalprompt.zip<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

This is a simple yet easy to modify sample of doing a simple HTML modal popup.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112,141],"tags":[120,256,193,222,252],"yoast_head":"\r\nSample Modal Revisited - LDNDeveloper<\/title>\r\n<meta name=\"description\" content=\"This is a simple yet easy to modify sample of doing a simple HTML modal popup.\" \/>\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=\"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Sample Modal Revisited - LDNDeveloper\" \/>\r\n<meta property=\"og:description\" content=\"This is a simple yet easy to modify sample of doing a simple HTML modal popup.\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/\" \/>\r\n<meta property=\"og:site_name\" content=\"LDNDeveloper\" \/>\r\n<meta property=\"article:published_time\" content=\"2014-09-01T17:48:26+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2014-09-01T17:49:10+00:00\" \/>\r\n<meta property=\"og:image\" content=\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/09\/modalprompt-300x173.png\" \/>\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\":\"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/\"},\"author\":{\"name\":\"ldnDeveloper\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\"},\"headline\":\"Sample Modal Revisited\",\"datePublished\":\"2014-09-01T17:48:26+00:00\",\"dateModified\":\"2014-09-01T17:49:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/\"},\"wordCount\":134,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\"},\"image\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/09\/modalprompt-300x173.png\",\"keywords\":[\"HTML\",\"jQuery\",\"jQuery Made Simple\",\"Modal\",\"Web\"],\"articleSection\":[\"Design\",\"Developement\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/\",\"url\":\"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/\",\"name\":\"Sample Modal Revisited - LDNDeveloper\",\"isPartOf\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/09\/modalprompt-300x173.png\",\"datePublished\":\"2014-09-01T17:48:26+00:00\",\"dateModified\":\"2014-09-01T17:49:10+00:00\",\"description\":\"This is a simple yet easy to modify sample of doing a simple HTML modal popup.\",\"breadcrumb\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/#primaryimage\",\"url\":\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/09\/modalprompt.png\",\"contentUrl\":\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/09\/modalprompt.png\",\"width\":614,\"height\":356,\"caption\":\"modal prompt - updated\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/andrewpallant.ca\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sample Modal Revisited\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#website\",\"url\":\"https:\/\/andrewpallant.ca\/wordpress\/\",\"name\":\"LDNDeveloper\",\"description\":\"Learning, Growing and Sharing.\",\"publisher\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/andrewpallant.ca\/wordpress\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\",\"name\":\"ldnDeveloper\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/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\":\"https:\/\/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":"Sample Modal Revisited - LDNDeveloper","description":"This is a simple yet easy to modify sample of doing a simple HTML modal popup.","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":"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/","og_locale":"en_US","og_type":"article","og_title":"Sample Modal Revisited - LDNDeveloper","og_description":"This is a simple yet easy to modify sample of doing a simple HTML modal popup.","og_url":"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/","og_site_name":"LDNDeveloper","article_published_time":"2014-09-01T17:48:26+00:00","article_modified_time":"2014-09-01T17:49:10+00:00","og_image":[{"url":"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/09\/modalprompt-300x173.png"}],"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":"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/#article","isPartOf":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/"},"author":{"name":"ldnDeveloper","@id":"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84"},"headline":"Sample Modal Revisited","datePublished":"2014-09-01T17:48:26+00:00","dateModified":"2014-09-01T17:49:10+00:00","mainEntityOfPage":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/"},"wordCount":134,"commentCount":0,"publisher":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84"},"image":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/#primaryimage"},"thumbnailUrl":"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/09\/modalprompt-300x173.png","keywords":["HTML","jQuery","jQuery Made Simple","Modal","Web"],"articleSection":["Design","Developement"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/","url":"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/","name":"Sample Modal Revisited - LDNDeveloper","isPartOf":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/#website"},"primaryImageOfPage":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/#primaryimage"},"image":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/#primaryimage"},"thumbnailUrl":"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/09\/modalprompt-300x173.png","datePublished":"2014-09-01T17:48:26+00:00","dateModified":"2014-09-01T17:49:10+00:00","description":"This is a simple yet easy to modify sample of doing a simple HTML modal popup.","breadcrumb":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/#primaryimage","url":"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/09\/modalprompt.png","contentUrl":"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/09\/modalprompt.png","width":614,"height":356,"caption":"modal prompt - updated"},{"@type":"BreadcrumbList","@id":"https:\/\/andrewpallant.ca\/wordpress\/sample-modal-revisited\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/andrewpallant.ca\/wordpress\/"},{"@type":"ListItem","position":2,"name":"Sample Modal Revisited"}]},{"@type":"WebSite","@id":"https:\/\/andrewpallant.ca\/wordpress\/#website","url":"https:\/\/andrewpallant.ca\/wordpress\/","name":"LDNDeveloper","description":"Learning, Growing and Sharing.","publisher":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/andrewpallant.ca\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84","name":"ldnDeveloper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/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":"https:\/\/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\/1342"}],"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=1342"}],"version-history":[{"count":4,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts\/1342\/revisions"}],"predecessor-version":[{"id":1347,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts\/1342\/revisions\/1347"}],"wp:attachment":[{"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/media?parent=1342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/categories?post=1342"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/tags?post=1342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}