{"id":404,"date":"2014-07-24T09:35:38","date_gmt":"2014-07-24T09:35:38","guid":{"rendered":"http:\/\/www.se80.co.uk\/training-education\/?p=404"},"modified":"2019-02-22T23:29:35","modified_gmt":"2019-02-22T23:29:35","slug":"sap-html-popup-window-just-using-css","status":"publish","type":"post","link":"https:\/\/www.se80.co.uk\/training-education\/sap-html-popup-window-just-using-css\/","title":{"rendered":"SAP HTML popup window just using CSS"},"content":{"rendered":"

The following code demonstrates how to create a popup window to display EKPO records within a SAP HTML based application. It achieves this without the need for any JavaScript and simply uses HTML, CSS styling and ABAP code to retrieve the data records. If you wanted tes this is a simple HTML document outside of SAP simply remove the section of code \u00a0within <!–ABAP\u00a0Code\u00a0–\u00a0Start\u00a0–> and <!–ABAP\u00a0Code\u00a0– End –><\/p>\n

 <\/p>\n

Full SAP HTML code Listing
\n<\/strong>
\n<!DOCTYPE\u00a0html>
\n<head>
\n<title>Example\u00a0popup\u00a0window\u00a0using\u00a0only\u00a0CSS<\/title>
\n<style>
\n.background_overlay{
\ndisplay:\u00a0none;
\nposition:\u00a0fixed;
\ntop:\u00a00%;
\nleft:\u00a00%;
\nwidth:\u00a0100%;
\nheight:\u00a0100%;
\nbackground-color:\u00a0black;
\nz-index:1001;
\n-moz-opacity:\u00a00.8;
\nopacity:.80;
\nfilter:\u00a0alpha(opacity=80);
\n}
\n.popup_window\u00a0{
\ndisplay:\u00a0none;
\nposition:\u00a0absolute;
\ntop:\u00a020%;
\nleft:\u00a020%;
\nwidth:\u00a060%;
\nheight:\u00a060%;
\npadding:\u00a010px;
\nborder:\u00a010px\u00a0solid\u00a0#80CCFF;
\nbackground-color:\u00a0#FFFFFF;
\nz-index:1002;
\noverflow:\u00a0auto;
\nfont-size:\u00a014px;
\n}
\n<\/style><\/p>\n

<script\u00a0type=“text\/javascript”<\/span>><\/p>\n

function\u00a0display_popup()\u00a0{
\ndocument.getElementById(‘window’<\/span>).style.display=‘block’<\/span>;
\ndocument.getElementById(‘background’<\/span>).style.display=‘block’<\/span>;
\n}<\/p>\n

function\u00a0close_popup()\u00a0{
\ndocument.getElementById(‘window’<\/span>).style.display=‘none’<\/span>;
\ndocument.getElementById(‘background’<\/span>).style.display=‘none’<\/span>;
\n}
\n<\/script><\/p>\n

<\/head>
\n<body>
\n<p>
\nClick\u00a0here\u00a0to\u00a0display\u00a0ekko\u00a0records
\n<a\u00a0href=“#”\u00a0<\/span>onclick=“display_popup();”<\/span>>Display\u00a0records<\/a><\/p>\n

<\/p><\/p>\n

<div\u00a0id=“window”\u00a0<\/span>class=“popup_window”<\/span>>EKPO\u00a0Records:
\n<br><br>
\n<!–ABAP\u00a0Code\u00a0–\u00a0Start\u00a0–><\/span><\/strong>
\n <%\u00a0\u00a0<\/span>data<\/span>:\u00a0<\/span>it_ekpo\u00a0type\u00a0<\/span>standard\u00a0<\/span>table\u00a0<\/span>of\u00a0<\/span>ekpo,<\/span><\/strong>
\n wa_ekpo\u00a0type\u00a0<\/span>ekpo.<\/span><\/strong><\/p>\n

select\u00a0<\/span>*<\/strong>
\n from\u00a0<\/span>ekpo<\/strong>
\n up\u00a0<\/span>to\u00a0<\/span>10\u00a0<\/span>rows<\/span><\/strong>
\n into\u00a0<\/span>table\u00a0<\/span>it_ekpo.<\/span><\/strong><\/p>\n

Loop\u00a0<\/span>at\u00a0<\/span>it_ekpo\u00a0into\u00a0<\/span>wa_ekpo.<\/span><\/strong>
\n %><\/span><\/strong>
\n <%=wa_ekpo-ebeln%><\/span>–<%=wa_ekpo-TXZ01%><\/span><br><\/strong>
\n <%<\/span><\/strong>
\n endloop<\/span>.<\/span><\/strong>
\n %><\/span><\/strong>
\n <!–ABAP\u00a0Code\u00a0–\u00a0End–><\/span><\/strong><\/p>\n

<a\u00a0href=“#”\u00a0<\/span>onclick=“close_popup();”<\/span>>Close<\/a><\/div>
\n<div\u00a0id=“background”\u00a0<\/span>class=“background_overlay”<\/span>><\/div>
\n<\/body>
\n<\/html><\/p>\n

 <\/p>\n

Initial Screen<\/strong>
\n\"css_popup1\"<\/a><\/p>\n

Popup screen<\/strong>
\n\"css_popup3\"<\/a><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

The following code demonstrates how to create a popup window to display EKPO records within a SAP HTML based application. It achieves this without the need for any JavaScript and simply uses HTML, CSS styling and ABAP code to retrieve the data records. If you wanted tes this is a simple HTML document outside of […]<\/p>\n","protected":false},"author":1,"featured_media":413,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[14],"tags":[],"yoast_head":"\nSAP HTML popup window just using CSS - SAP Help, Training and Education<\/title>\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.se80.co.uk\/training-education\/sap-html-popup-window-just-using-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SAP HTML popup window just using CSS - SAP Help, Training and Education\" \/>\n<meta property=\"og:description\" content=\"The following code demonstrates how to create a popup window to display EKPO records within a SAP HTML based application. It achieves this without the need for any JavaScript and simply uses HTML, CSS styling and ABAP code to retrieve the data records. If you wanted tes this is a simple HTML document outside of […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.se80.co.uk\/training-education\/sap-html-popup-window-just-using-css\/\" \/>\n<meta property=\"og:site_name\" content=\"SAP Help, Training and Education\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-24T09:35:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-02-22T23:29:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.se80.co.uk\/training-education\/wp-content\/uploads\/2014\/07\/css_popup3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"479\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"se80\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"se80\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/sap-html-popup-window-just-using-css\/\",\"url\":\"https:\/\/www.se80.co.uk\/training-education\/sap-html-popup-window-just-using-css\/\",\"name\":\"SAP HTML popup window just using CSS - SAP Help, Training and Education\",\"isPartOf\":{\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/#website\"},\"datePublished\":\"2014-07-24T09:35:38+00:00\",\"dateModified\":\"2019-02-22T23:29:35+00:00\",\"author\":{\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/#\/schema\/person\/ddc6a049c1b0790f62d70278be75e511\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/sap-html-popup-window-just-using-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.se80.co.uk\/training-education\/sap-html-popup-window-just-using-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/sap-html-popup-window-just-using-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.se80.co.uk\/training-education\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SAP HTML popup window just using CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/#website\",\"url\":\"https:\/\/www.se80.co.uk\/training-education\/\",\"name\":\"SAP Help, Training and Education\",\"description\":\"Learn SAP\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.se80.co.uk\/training-education\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/#\/schema\/person\/ddc6a049c1b0790f62d70278be75e511\",\"name\":\"se80\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3fd4e388f05bf3c763e46cd1f77afeb2?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3fd4e388f05bf3c763e46cd1f77afeb2?s=96&d=retro&r=g\",\"caption\":\"se80\"},\"url\":\"https:\/\/www.se80.co.uk\/training-education\/author\/se80\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"SAP HTML popup window just using CSS - SAP Help, Training and Education","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.se80.co.uk\/training-education\/sap-html-popup-window-just-using-css\/","og_locale":"en_US","og_type":"article","og_title":"SAP HTML popup window just using CSS - SAP Help, Training and Education","og_description":"The following code demonstrates how to create a popup window to display EKPO records within a SAP HTML based application. It achieves this without the need for any JavaScript and simply uses HTML, CSS styling and ABAP code to retrieve the data records. If you wanted tes this is a simple HTML document outside of […]","og_url":"https:\/\/www.se80.co.uk\/training-education\/sap-html-popup-window-just-using-css\/","og_site_name":"SAP Help, Training and Education","article_published_time":"2014-07-24T09:35:38+00:00","article_modified_time":"2019-02-22T23:29:35+00:00","og_image":[{"width":600,"height":479,"url":"https:\/\/www.se80.co.uk\/training-education\/wp-content\/uploads\/2014\/07\/css_popup3.png","type":"image\/png"}],"author":"se80","twitter_card":"summary_large_image","twitter_misc":{"Written by":"se80","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.se80.co.uk\/training-education\/sap-html-popup-window-just-using-css\/","url":"https:\/\/www.se80.co.uk\/training-education\/sap-html-popup-window-just-using-css\/","name":"SAP HTML popup window just using CSS - SAP Help, Training and Education","isPartOf":{"@id":"https:\/\/www.se80.co.uk\/training-education\/#website"},"datePublished":"2014-07-24T09:35:38+00:00","dateModified":"2019-02-22T23:29:35+00:00","author":{"@id":"https:\/\/www.se80.co.uk\/training-education\/#\/schema\/person\/ddc6a049c1b0790f62d70278be75e511"},"breadcrumb":{"@id":"https:\/\/www.se80.co.uk\/training-education\/sap-html-popup-window-just-using-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.se80.co.uk\/training-education\/sap-html-popup-window-just-using-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.se80.co.uk\/training-education\/sap-html-popup-window-just-using-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.se80.co.uk\/training-education\/"},{"@type":"ListItem","position":2,"name":"SAP HTML popup window just using CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.se80.co.uk\/training-education\/#website","url":"https:\/\/www.se80.co.uk\/training-education\/","name":"SAP Help, Training and Education","description":"Learn SAP","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.se80.co.uk\/training-education\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.se80.co.uk\/training-education\/#\/schema\/person\/ddc6a049c1b0790f62d70278be75e511","name":"se80","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.se80.co.uk\/training-education\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3fd4e388f05bf3c763e46cd1f77afeb2?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3fd4e388f05bf3c763e46cd1f77afeb2?s=96&d=retro&r=g","caption":"se80"},"url":"https:\/\/www.se80.co.uk\/training-education\/author\/se80\/"}]}},"jetpack_featured_media_url":"https:\/\/www.se80.co.uk\/training-education\/wp-content\/uploads\/2014\/07\/css_popup3.png","_links":{"self":[{"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/posts\/404"}],"collection":[{"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/comments?post=404"}],"version-history":[{"count":8,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/posts\/404\/revisions"}],"predecessor-version":[{"id":1993,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/posts\/404\/revisions\/1993"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/media\/413"}],"wp:attachment":[{"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/media?parent=404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/categories?post=404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/tags?post=404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}