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