Custom_Popup_page_APEX 4.2

Step 1:
 Create a new page with popup template (Page No
-2175).
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:”+Contract_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 you want.
Ex:
·        
Item
·        
button
By
Palani Kumar
K
Recent Posts