{"id":909,"date":"2015-01-29T03:52:36","date_gmt":"2015-01-29T03:52:36","guid":{"rendered":"http:\/\/www.advancedwebhelp.com\/blog\/?p=909"},"modified":"2015-01-29T03:53:45","modified_gmt":"2015-01-29T03:53:45","slug":"snippet-popups","status":"publish","type":"post","link":"https:\/\/www.advancedwebhelp.com\/blog\/2015\/snippet-popups","title":{"rendered":"Snippet: Popups"},"content":{"rendered":"<p>The following is code to create popups.   To use this code:<\/p>\n<ol>\n<li>Create a div that contains the pop up content and add an id tag to the div.  <\/li>\n<li>Create a div or image that will be used to open the popup, and add a class tag.<\/li>\n<li>Add a div or image to the popup content that may be pressed to close the popup, add a class to the div or image<\/li>\n<\/ol>\n<p>Add the following JavaScript code &#8230; <\/p>\n<pre><code>\r\n    &lt;script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js\"><\/script>\r\n    &lt;script type=\"text\/javascript\">\r\n        $(function() {\r\n            if (!$(\"#dr_pop_div\").length )  $(\"body\").prepend( \"&lt;div id='dr_pop_div' >&lt;\/div>\" ) ;\r\n                function dr_pop(config) {\r\n                    var dr_tag    = (config.msg) ? config.msg : \"#msg\" ;  \/* tagged div that will pop up *\/\r\n                    var dr_open   = (config.open)? config.open : \".info_open\"  ;  \/* element to click to open    *\/\r\n                    var dr_close  = (config.close)? config.close : \".info_close\"  ;  \/* element to click to close   *\/\r\n                    var dr_toggle = (config.toggle)? config.toggle : \".info_toggle\"  ; \/* element to click to toggle *\/\r\n\r\n                    $(\"#dr_pop_div\" ).append($(dr_tag));\r\n                    $(\"#dr_pop_div\").addClass(\"dr_pop_hide\") ; \r\n                    $(dr_tag).addClass(\"dr_pop_hide\") ;\r\n\r\n                    $(dr_open).click(function()   {\r\n                        if ($(\"#dr_pop_div\").hasClass(\"dr_pop_hide\"))   $(\"#dr_pop_div\").removeClass(\"dr_pop_hide\") ;\r\n                        if ($(dr_tag).hasClass(\"dr_pop_hide\")) \t        $(dr_tag).removeClass(\"dr_pop_hide\") ;\t\r\n                        if (!$(\"#dr_pop_div\").hasClass(\"dr_pop_show\"))  $(\"#dr_pop_div\").addClass(\"dr_pop_show\") ;\r\n                        if (!$(dr_tag).hasClass(\"dr_pop_show\"))         $(dr_tag).addClass(\"dr_pop_show\") ; \r\n                    }) ;\r\n                    $(dr_close).click(function()  {\r\n                        if ($(dr_tag).hasClass(\"dr_pop_show\"))        $(dr_tag).removeClass(\"dr_pop_show\") ;\r\n                        if ($(\"#dr_pop_div\").hasClass(\"dr_pop_show\")) $(\"#dr_pop_div\").removeClass(\"dr_pop_show\") ;\r\n\t\t\t\t\r\n                        if (!$(dr_tag).hasClass(\"dr_pop_hide\"))        $(dr_tag).addClass(\"dr_pop_hide\") ;\r\n                        if (!$(\"#dr_pop_div\").hasClass(\"dr_pop_hide\")) $(\"#dr_pop_div\").addClass(\"dr_pop_hide\") ;\r\n\t\t    }) ;\r\n                    $(dr_toggle).click(function() {\r\n                        if ($(\"#dr_pop_div\").hasClass(\"dr_pop_hide\")) {\r\n                            $(\"#dr_pop_div\").removeClass(\"dr_pop_hide\") ;\r\n                            $(dr_tag).removeClass(\"dr_pop_hide\") ;\r\n                            if (!$(\"#dr_pop_div\").hasClass(\"dr_pop_show\")) { \r\n                                $(\"#dr_pop_div\").addClass(\"dr_pop_show\") ;\r\n                                $(dr_tag).addClass(\"dr_pop_show\") ;\r\n                            }\r\n                        } else {\r\n                            if ($(\"#dr_pop_div\").hasClass(\"dr_pop_show\")) { \r\n                                $(\"#dr_pop_div\").removeClass(\"dr_pop_show\") ;\r\n                                $(dr_tag).removeClass(\"dr_pop_show\") ;\r\n                            }\r\n                            if (!$(\"#dr_pop_div\").hasClass(\"dr_pop_hide\")) {\r\n                                $(\"#dr_pop_div\").addClass(\"dr_pop_hide\") ;\r\n                                $(dr_tag).addClass(\"dr_pop_hide\") ;\r\n                            }\r\n                        }\t\t    \r\n                    }) ;\r\n                }\r\n                var popup1 = new dr_pop({ \"msg\" : \"#msg\", \"open\" : \".info_open\", \"close\" : \".info_close\"  }) ; \r\n                \/* ... more popup declarations go here *\/\r\n            }) ;\t\t  \r\n\t&lt;\/script>\r\n\r\n<\/code><\/pre>\n<div style=\"clear: both ;\"><\/div>\n<p>For each message popup, declare the popup by defining the labels that will be used for the popups.   The definitions of the labels are done in the &#8220;dr_pop&#8221; statement.   The dr_pop(config) is defined as follows:<\/p>\n<pre><\/code>\r\n    var pop = new dr_pop( {\r\n       \"msg\" : <message> ,     \r\n       \"open\" : <openbtn> ,\r\n       \"close\" : <closebtn>\r\n      }) ;\r\n  Where:\r\n     <message> is the quoted id for the div that holds the message, example: \"#msg\"\r\n     <openbtn> is the quoted id or class of the object to use as the open button. \r\n                (Example:  .info_open) \r\n     <closebtn> is the quoted id or class of the object to use as the close button.\r\n                (example: .info_close)\r\n\r\n<\/code><\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The following is code to create popups. To use this code: Create a div that contains the pop up content and add an id tag to the div. Create a div or image that will be used to open the popup, and add a class tag. Add a div or image to the popup content [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,16,13,32],"tags":[],"class_list":["post-909","post","type-post","status-publish","format-standard","hentry","category-html5","category-javascript","category-jquery","category-snippet"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts\/909","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/comments?post=909"}],"version-history":[{"count":2,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts\/909\/revisions"}],"predecessor-version":[{"id":999,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts\/909\/revisions\/999"}],"wp:attachment":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/media?parent=909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/categories?post=909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/tags?post=909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}