                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     {"id":5864,"date":"2023-01-24T10:08:00","date_gmt":"2023-01-24T10:08:00","guid":{"rendered":"http:\/\/ebhor.com\/?p=5864"},"modified":"2023-01-26T11:54:16","modified_gmt":"2023-01-26T11:54:16","slug":"javascript-overlays","status":"publish","type":"post","link":"https:\/\/www.ebhor.com\/javascript-overlays\/","title":{"rendered":"JavaScript Overlays with Examples"},"content":{"rendered":"\n<p>There are different kinds of JavaScript overlays for modal dialogs for prompting, <\/p>\n\n\n\n<p>overlays for info or warning boxes, tabbed overlays, alerting users overlays for displaying complex data.<\/p>\n\n\n\n<p>The overlay can implement on HTML like\nimages, links, forms, tables, any type of div and any can be styled with CSS,\nlike rounded borders, shadows or gradients etc.<\/p>\n\n\n\n<p>Core behaviors are configurable\nsuch as positioning, animation durations and closing the overlay.<\/p>\n\n\n\n<p>Overlay offers a good container for other tools. Think of scrollables, tabs or accordions inside the Overlay.<\/p>\n\n\n\n<pre class=\"theme:eclipse font:verdana toolbar:2\n show-plain:3 lang:default decode:true\">\n<html>\n   <head>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      <style>\n         #overlay {\n         position: fixed;\n         display: none;\n         width: 100%;\n         height: 100%;\n         top: 0;\n         left: 0;\n         right: 0;\n         bottom: 0;\n         background-color: rgba(0,0,0,0.5);\n         z-index: 2;\n         cursor: pointer;\n         }\n      <\/style>\n   <\/head>\n   <body>\n      <div id=\"overlay\" onclick=\"off()\"><\/div>\n      <div>\n         <button onclick=\"on()\">On the overlay effect<\/button>\n      <\/div>\n      <script>\n         function on() {\n         document.getElementById(\"overlay\").style.display = \"block\";\n         }\n         \n         function off() {\n         document.getElementById(\"overlay\").style.display = \"none\";\n         }\n      <\/script>\n   <\/body>\n<\/html>\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>There are different kinds of JavaScript overlays for modal dialogs for prompting, overlays for info or warning boxes, tabbed overlays, alerting users overlays for displaying complex data. The overlay can implement on HTML like images, links, forms, tables, any type of div and any can be styled with CSS, like rounded borders, shadows or gradients &#8230; <a title=\"JavaScript Overlays with Examples\" class=\"read-more\" href=\"https:\/\/www.ebhor.com\/javascript-overlays\/\" aria-label=\"More on JavaScript Overlays with Examples\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Overlays with Examples - Ebhor.com<\/title>\n<meta name=\"description\" content=\"JavaScript Overlays overlays for info or warning boxes, tabbed overlays, alerting usersoverlays for displaying complex data.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ebhor.com\/javascript-overlays\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Overlays with Examples - Ebhor.com\" \/>\n<meta property=\"og:description\" content=\"JavaScript Overlays overlays for info or warning boxes, tabbed overlays, alerting usersoverlays for displaying complex data.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ebhor.com\/javascript-overlays\/\" \/>\n<meta property=\"og:site_name\" content=\"Ebhor.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ebhorcom\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-24T10:08:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-26T11:54:16+00:00\" \/>\n<meta name=\"author\" content=\"manish\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"manish\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.ebhor.com\/javascript-overlays\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.ebhor.com\/javascript-overlays\/\"},\"author\":{\"name\":\"manish\",\"@id\":\"https:\/\/www.ebhor.com\/#\/schema\/person\/6a63908fdbbb27289970569ebd2e709b\"},\"headline\":\"JavaScript Overlays with Examples\",\"datePublished\":\"2023-01-24T10:08:00+00:00\",\"dateModified\":\"2023-01-26T11:54:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.ebhor.com\/javascript-overlays\/\"},\"wordCount\":90,\"publisher\":{\"@id\":\"https:\/\/www.ebhor.com\/#organization\"},\"articleSection\":[\"javascript\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ebhor.com\/javascript-overlays\/\",\"url\":\"https:\/\/www.ebhor.com\/javascript-overlays\/\",\"name\":\"JavaScript Overlays with Examples - Ebhor.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.ebhor.com\/#website\"},\"datePublished\":\"2023-01-24T10:08:00+00:00\",\"dateModified\":\"2023-01-26T11:54:16+00:00\",\"description\":\"JavaScript Overlays overlays for info or warning boxes, tabbed overlays, alerting usersoverlays for displaying complex data.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.ebhor.com\/javascript-overlays\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ebhor.com\/javascript-overlays\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.ebhor.com\/javascript-overlays\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.ebhor.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Overlays with Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.ebhor.com\/#website\",\"url\":\"https:\/\/www.ebhor.com\/\",\"name\":\"Ebhor.com\",\"description\":\"Read The Latest Post Java, Css, Html, Php learning articles\",\"publisher\":{\"@id\":\"https:\/\/www.ebhor.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.ebhor.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.ebhor.com\/#organization\",\"name\":\"Ebhor.com\",\"url\":\"https:\/\/www.ebhor.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.ebhor.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.ebhor.com\/wp-content\/uploads\/2021\/05\/cropped-cropped-cropped-ebhor_logo_100x.jpg\",\"contentUrl\":\"https:\/\/www.ebhor.com\/wp-content\/uploads\/2021\/05\/cropped-cropped-cropped-ebhor_logo_100x.jpg\",\"width\":100,\"height\":100,\"caption\":\"Ebhor.com\"},\"image\":{\"@id\":\"https:\/\/www.ebhor.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/ebhorcom\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.ebhor.com\/#\/schema\/person\/6a63908fdbbb27289970569ebd2e709b\",\"name\":\"manish\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.ebhor.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/def43b1d916cff76638fa6c47604a2bb?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/def43b1d916cff76638fa6c47604a2bb?s=96&r=g\",\"caption\":\"manish\"},\"description\":\"A Learner and Teacher\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Overlays with Examples - Ebhor.com","description":"JavaScript Overlays overlays for info or warning boxes, tabbed overlays, alerting usersoverlays for displaying complex data.","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:\/\/www.ebhor.com\/javascript-overlays\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Overlays with Examples - Ebhor.com","og_description":"JavaScript Overlays overlays for info or warning boxes, tabbed overlays, alerting usersoverlays for displaying complex data.","og_url":"https:\/\/www.ebhor.com\/javascript-overlays\/","og_site_name":"Ebhor.com","article_publisher":"https:\/\/www.facebook.com\/ebhorcom\/","article_published_time":"2023-01-24T10:08:00+00:00","article_modified_time":"2023-01-26T11:54:16+00:00","author":"manish","twitter_card":"summary_large_image","twitter_misc":{"Written by":"manish","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.ebhor.com\/javascript-overlays\/#article","isPartOf":{"@id":"https:\/\/www.ebhor.com\/javascript-overlays\/"},"author":{"name":"manish","@id":"https:\/\/www.ebhor.com\/#\/schema\/person\/6a63908fdbbb27289970569ebd2e709b"},"headline":"JavaScript Overlays with Examples","datePublished":"2023-01-24T10:08:00+00:00","dateModified":"2023-01-26T11:54:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.ebhor.com\/javascript-overlays\/"},"wordCount":90,"publisher":{"@id":"https:\/\/www.ebhor.com\/#organization"},"articleSection":["javascript"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.ebhor.com\/javascript-overlays\/","url":"https:\/\/www.ebhor.com\/javascript-overlays\/","name":"JavaScript Overlays with Examples - Ebhor.com","isPartOf":{"@id":"https:\/\/www.ebhor.com\/#website"},"datePublished":"2023-01-24T10:08:00+00:00","dateModified":"2023-01-26T11:54:16+00:00","description":"JavaScript Overlays overlays for info or warning boxes, tabbed overlays, alerting usersoverlays for displaying complex data.","breadcrumb":{"@id":"https:\/\/www.ebhor.com\/javascript-overlays\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.ebhor.com\/javascript-overlays\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.ebhor.com\/javascript-overlays\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.ebhor.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript Overlays with Examples"}]},{"@type":"WebSite","@id":"https:\/\/www.ebhor.com\/#website","url":"https:\/\/www.ebhor.com\/","name":"Ebhor.com","description":"Read The Latest Post Java, Css, Html, Php learning articles","publisher":{"@id":"https:\/\/www.ebhor.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.ebhor.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.ebhor.com\/#organization","name":"Ebhor.com","url":"https:\/\/www.ebhor.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.ebhor.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.ebhor.com\/wp-content\/uploads\/2021\/05\/cropped-cropped-cropped-ebhor_logo_100x.jpg","contentUrl":"https:\/\/www.ebhor.com\/wp-content\/uploads\/2021\/05\/cropped-cropped-cropped-ebhor_logo_100x.jpg","width":100,"height":100,"caption":"Ebhor.com"},"image":{"@id":"https:\/\/www.ebhor.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ebhorcom\/"]},{"@type":"Person","@id":"https:\/\/www.ebhor.com\/#\/schema\/person\/6a63908fdbbb27289970569ebd2e709b","name":"manish","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.ebhor.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/def43b1d916cff76638fa6c47604a2bb?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/def43b1d916cff76638fa6c47604a2bb?s=96&r=g","caption":"manish"},"description":"A Learner and Teacher"}]}},"_links":{"self":[{"href":"https:\/\/www.ebhor.com\/wp-json\/wp\/v2\/posts\/5864"}],"collection":[{"href":"https:\/\/www.ebhor.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ebhor.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ebhor.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ebhor.com\/wp-json\/wp\/v2\/comments?post=5864"}],"version-history":[{"count":1,"href":"https:\/\/www.ebhor.com\/wp-json\/wp\/v2\/posts\/5864\/revisions"}],"predecessor-version":[{"id":12094,"href":"https:\/\/www.ebhor.com\/wp-json\/wp\/v2\/posts\/5864\/revisions\/12094"}],"wp:attachment":[{"href":"https:\/\/www.ebhor.com\/wp-json\/wp\/v2\/media?parent=5864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ebhor.com\/wp-json\/wp\/v2\/categories?post=5864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ebhor.com\/wp-json\/wp\/v2\/tags?post=5864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}