{"id":1180,"date":"2014-02-06T00:06:48","date_gmt":"2014-02-06T05:06:48","guid":{"rendered":"http:\/\/andrewpallant.ca\/wordpress\/?p=1180"},"modified":"2014-03-01T11:39:54","modified_gmt":"2014-03-01T16:39:54","slug":"jquery-modal-prompt","status":"publish","type":"post","link":"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/","title":{"rendered":"jQuery Modal Prompt"},"content":{"rendered":"

Today I am going to demonstrate how easy it is to integrate a stylish modal prompt. \u00a0It takes a very little amount of code and can be easily slipped into any web page that you may be working on. \u00a0The look of it is easily tweaked in a simple CSS file. \u00a0The triggers to show the prompt is some very basic jQuery.
\n
\n\"Modal<\/a>The nuts and bolts of it can be broken down to 2 DIV elements. \u00a0One DIV element for the background to grey out the main page. \u00a0The second DIV element is the actually prompt. \u00a0I like to use a DIV element to grey out the main page as it is one layer above and it blocks the click of buttons and links, but yet allows you to know you have not left the page. \u00a0This example has been tested in all modern browsers and has been known to work well.<\/p>\n

\u00a0<\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Click to: Run the Sample<\/a>
\nClick to: Download Full Source of the Sample<\/a><\/p>\n

Sneak Peak at the Code: <\/strong><\/p>\n

 <div id=\"backgroundDiv\"><\/div>  \r\n   <div id=\"promptDiv\">  \r\n     <br \/>Deleting this record is permanent.<br\/><br\/>  \r\n     <strong>Are You Sure?<\/strong><br\/><br\/>  \r\n     <p style=\"text-align: center;\">\r\n          <input type=\"button\" style=\"\" id=\"btnYes\" value=\"Yes\"\/><input type=\"button\" id=\"btnNo\" value=\"No\"\/>\r\n     <\/p>  \r\n   <\/div>  \r\n\r\n   <script type=\"text\/javascript\">  \r\n     \/\/ Set Up Scripts Required For This Demonstation  \r\n     $(document).ready(function () {  \r\n       \/\/ Show Prompt  \r\n       $('#btnTest').click(function() {  \r\n         $('#backgroundDiv').fadeTo(\"fast\", 0.5);  \r\n         $('#promptDiv').show();  \r\n       });  \r\n       \/\/ Yes Button  \r\n       $('#btnYes').click(function () {  \r\n         alert('Record Deleted');  \r\n         $('#backgroundDiv').hide();  \r\n         $('#promptDiv').hide();  \r\n       });  \r\n       \/\/ No Button  \r\n       $('#btnNo').click(function () {  \r\n         alert('Record Deletion Cancelled');  \r\n         $('#backgroundDiv').hide();  \r\n         $('#promptDiv').hide();  \r\n       });  \r\n     });  \r\n   <\/script>  \r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Today I am going to demonstrate how easy it is to integrate a stylish modal prompt. \u00a0It takes a very little amount of code and can be easily slipped into any web page that you may be working on. \u00a0The look of it is easily tweaked in a simple CSS file. \u00a0The triggers to show … Continue reading jQuery Modal Prompt<\/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":[112,141,149,96],"tags":[193],"yoast_head":"\r\njQuery Modal Prompt by Andrew Pallant - Software Developer In London<\/title>\r\n<meta name=\"description\" content=\"jQuery Modal Prompt by Andrew Pallant - Software Developer In London\" \/>\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\/jquery-modal-prompt\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"jQuery Modal Prompt by Andrew Pallant - Software Developer In London\" \/>\r\n<meta property=\"og:description\" content=\"jQuery Modal Prompt by Andrew Pallant - Software Developer In London\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/\" \/>\r\n<meta property=\"og:site_name\" content=\"LDNDeveloper\" \/>\r\n<meta property=\"article:published_time\" content=\"2014-02-06T05:06:48+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2014-03-01T16:39:54+00:00\" \/>\r\n<meta property=\"og:image\" content=\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/BfywE63CEAA28-N.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=\"2 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/\"},\"author\":{\"name\":\"ldnDeveloper\",\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\"},\"headline\":\"jQuery Modal Prompt\",\"datePublished\":\"2014-02-06T05:06:48+00:00\",\"dateModified\":\"2014-03-01T16:39:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/\"},\"wordCount\":175,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\"},\"image\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/BfywE63CEAA28-N.png\",\"keywords\":[\"jQuery Made Simple\"],\"articleSection\":[\"Design\",\"Developement\",\"jQuery\",\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/\",\"url\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/\",\"name\":\"jQuery Modal Prompt by Andrew Pallant - Software Developer In London\",\"isPartOf\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/BfywE63CEAA28-N.png\",\"datePublished\":\"2014-02-06T05:06:48+00:00\",\"dateModified\":\"2014-03-01T16:39:54+00:00\",\"description\":\"jQuery Modal Prompt by Andrew Pallant - Software Developer In London\",\"breadcrumb\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/#primaryimage\",\"url\":\"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/BfywE63CEAA28-N.png\",\"contentUrl\":\"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/BfywE63CEAA28-N.png\",\"width\":499,\"height\":299,\"caption\":\"Modal Prompt\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/andrewpallant.ca\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery Modal Prompt\"}]},{\"@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\":\"https:\/\/andrewpallant.ca\/wordpress\/author\/ldndeveloper\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery Modal Prompt by Andrew Pallant - Software Developer In London","description":"jQuery Modal Prompt by Andrew Pallant - Software Developer In London","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\/jquery-modal-prompt\/","og_locale":"en_US","og_type":"article","og_title":"jQuery Modal Prompt by Andrew Pallant - Software Developer In London","og_description":"jQuery Modal Prompt by Andrew Pallant - Software Developer In London","og_url":"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/","og_site_name":"LDNDeveloper","article_published_time":"2014-02-06T05:06:48+00:00","article_modified_time":"2014-03-01T16:39:54+00:00","og_image":[{"url":"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/BfywE63CEAA28-N.png"}],"author":"ldnDeveloper","twitter_card":"summary_large_image","twitter_creator":"@LdnDeveloper","twitter_site":"@LdnDeveloper","twitter_misc":{"Written by":"ldnDeveloper","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/#article","isPartOf":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/"},"author":{"name":"ldnDeveloper","@id":"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84"},"headline":"jQuery Modal Prompt","datePublished":"2014-02-06T05:06:48+00:00","dateModified":"2014-03-01T16:39:54+00:00","mainEntityOfPage":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/"},"wordCount":175,"commentCount":0,"publisher":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84"},"image":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/#primaryimage"},"thumbnailUrl":"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/BfywE63CEAA28-N.png","keywords":["jQuery Made Simple"],"articleSection":["Design","Developement","jQuery","Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/","url":"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/","name":"jQuery Modal Prompt by Andrew Pallant - Software Developer In London","isPartOf":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/#website"},"primaryImageOfPage":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/#primaryimage"},"image":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/#primaryimage"},"thumbnailUrl":"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/BfywE63CEAA28-N.png","datePublished":"2014-02-06T05:06:48+00:00","dateModified":"2014-03-01T16:39:54+00:00","description":"jQuery Modal Prompt by Andrew Pallant - Software Developer In London","breadcrumb":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/#primaryimage","url":"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/BfywE63CEAA28-N.png","contentUrl":"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/BfywE63CEAA28-N.png","width":499,"height":299,"caption":"Modal Prompt"},{"@type":"BreadcrumbList","@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-modal-prompt\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/andrewpallant.ca\/wordpress\/"},{"@type":"ListItem","position":2,"name":"jQuery Modal Prompt"}]},{"@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":"https:\/\/andrewpallant.ca\/wordpress\/author\/ldndeveloper\/"}]}},"_links":{"self":[{"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts\/1180"}],"collection":[{"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/comments?post=1180"}],"version-history":[{"count":23,"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts\/1180\/revisions"}],"predecessor-version":[{"id":1204,"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts\/1180\/revisions\/1204"}],"wp:attachment":[{"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/media?parent=1180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/categories?post=1180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/tags?post=1180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}