Introduction:
Although HTML DB allows application developers to declaratively add popup list of value (popup LOV) items to their pages, occasionally application design requires developers to create custom popup pages. This how to describes the steps to create such a custom popup page.
Implementation :
Step 1:
Create a new page with popup template.
Step 2:
Create 2 region in old (Calling) Page and write the below scripts in region source.
Create Region and copied the below code (Popup_script 1)
<script>
function fnGetPopup(Contract_no)
{
$x(“idDivIFrame”).innerHTML = “<center><iframe src=’f?p=&APP_ID.:2175:&SESSION.::NO::P2175_CONTRACT_NO:”+Cont ract_no+”‘ scrolling=’no’ height=’500′ width=’450′ frameborder=’0′></iframe></center>”;
showPopup();
}
</script>
Create Region and copied the below code (Popup_script 2)
<style>
.graydiv
{
position: absolute;
background-color: #5B5B5B;
left: 0px;
top: 0px;
z-index: 10000;
display: none;
}
.ModalBackground
{
background-color: black;
filter: alpha(opacity=70);
opacity: 0.7;
}
</style>
<!–input type=”button” value=”Show Popup” onclick=”showPopup();” /–>
<div id=”divg” class=”ModalBackground graydiv”> </div>
<div id=”divSignin” style=”border: ‘1px soild green’; display: none; z-index: 100002; width: 550px; position: absolute;”>
<div style=”text-align:right;height:100px;width:100px;background-color:White;border:solid 1px lightyellow”>
<div id=”idDivTest”>
<div id=”idDivIFrame”></div>
</div>
<!–input type=”button” value=”Close Me” onclick=”closePopup();” /–>
</div>
</div>
<script>
//window.onload = showPopup;
function closePopup()
{
document.getElementById(“divSignin”).style.display=”none”;
objDiv = document.getElementById(“divg”);
objDiv.style.display = “none”;
return false;
}
function showPopup()
{
try
{
document.getElementById(“divSignin”).style.display=”block”;
objDiv = document.getElementById(“divg”);
objDiv.style.display = “block”;
objDiv.style.width = document.body.scrollWidth;
objDiv.style.height= document.body.scrollHeight;
fnSetDivSigninLeft(“divSignin”);
}
catch(e)
{
alert(e);
}
return false
}
function fnSetDivSigninLeft(oElement)
{
var DivWidth;
var DivHeight ;
if (“&P0_OS_BROWSER_INFO.”.indexOf(“UNIX”)==-1)
{
DivWidth = parseInt(document.getElementById(oElement).offsetWidth,10) ;
DivHeight = parseInt(document.getElementById(oElement).offsetHeight,10) ;
document.getElementById(oElement).style.left = (document.body.offsetWidth / 2) – (DivWidth / 2)+100;
document.getElementById(oElement).style.top = (350/ 2) – ( DivHeight/ 2);
}
else
{
DivWidth = parseInt(document.getElementById(oElement).offsetWidth,10) ;
DivHeight = parseInt(document.getElementById(oElement).offsetHeight,10) ;
document.getElementById(oElement).style.left = (document.body.offsetWidth / 2) – (DivWidth / 2)+200;
document.getElementById(oElement).style.top = (document.body.innerHeight/ 2) – ( DivHeight/ 2);
}
return false;
}
</script>
Step 3:
Call the java script function (fnGetPopup(:input)) wherever Its required.
For Example, will call the function from item/button.
Conclusion:
Using the java script function will achieve this scenario.
