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 within <!–ABAP Code – Start –> and <!–ABAP Code – End –>
Full SAP HTML code Listing
<!DOCTYPE html>
<head>
<title>Example popup window using only CSS</title>
<style>
.background_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.popup_window {
display: none;
position: absolute;
top: 20%;
left: 20%;
width: 60%;
height: 60%;
padding: 10px;
border: 10px solid #80CCFF;
background-color: #FFFFFF;
z-index:1002;
overflow: auto;
font-size: 14px;
}
</style>
<script type=“text/javascript”>
function display_popup() {
document.getElementById(‘window’).style.display=‘block’;
document.getElementById(‘background’).style.display=‘block’;
}
function close_popup() {
document.getElementById(‘window’).style.display=‘none’;
document.getElementById(‘background’).style.display=‘none’;
}
</script>
</head>
<body>
<p>
Click here to display ekko records
<a href=“#” onclick=“display_popup();”>Display records</a>
</p>
<div id=“window” class=“popup_window”>EKPO Records:
<br><br>
<!–ABAP Code – Start –>
<% data: it_ekpo type standard table of ekpo,
wa_ekpo type ekpo.
select *
from ekpo
up to 10 rows
into table it_ekpo.
Loop at it_ekpo into wa_ekpo.
%>
<%=wa_ekpo-ebeln%>–<%=wa_ekpo-TXZ01%><br>
<%
endloop.
%>
<!–ABAP Code – End–>
<a href=“#” onclick=“close_popup();”>Close</a></div>
<div id=“background” class=“background_overlay”></div>
</body>
</html>
Initial Screen
Popup screen
