3 Replies Latest reply on Jan 13, 2013 2:29 AM by aungthawaye

Background of Modal popup panel inside iframe

javaxchange Jan 3, 2013 2:09 AM

Hi,

I am using iframe in my application to render the content part on click of the menu. Please find my code used to include iframe below

<h:panelGroup id="frmContent">
       <iframe id="myIframe" src="#{UtilBean.pageUrl}" height="600" width="980" frameBorder="0">
         This is my iframe
       </iframe>

</h:panelGroup>

On showing a modal popup panel, it is graying out and disabling the background of iframe part only (higlighted in red), not the other parts in the entire page. Please find the attached image.

Is there anyway to disable and grayout the entire page on showing popup?

Any help wil be greatly appreciated.

Thanks ,

Sreejith

popup.bmp 1.6 MB

1. Re: Background of Modal popup panel inside iframe

aungthawaye Jan 3, 2013 10:36 AM (in response to javaxchange)

Hi Sreejith,

You can create <div></div> tag and show that <div> tag when you call your popup panel. For example, please put <div id="mask"></div> somewhere in your main page, then when you call popup you also display that "mask". Following is css for "mask".

#mask {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 500;
    background-color: #c9c9c9;
    display: none;
    opacity: 0.35;
    width: 100%;
    height: 100%;
}

In your html, pls put something like below:

<html>
...
<body>
...
...
<div id="mask"></div>
</body>
</html>

To display it, you may use java script. (I am not sure how you load your popup, here I will use jQuery).

$(document).ready(function()
{

     $('#mybtn').click(function() {
        // show grey area
        $('#mask').show();
        // now you may call ur popup.
        // ... ....
    });
});

Please make sure "mask" not be inside your iFrame. It must be in your main html page. Hope this helps. If you are still facing problem, please let me know.

Regards,
Aung
1 of 1 people found this helpful
Actions
2. Re: Background of Modal popup panel inside iframe

javaxchange Jan 8, 2013 1:45 AM (in response to aungthawaye)

Thanks Aung for your helpful soln.

$('#mask').show(); didn't work for me. so I have used the below code

parent.document.getElementById('mask').style.display = 'block';

Now the issue is that the entire page is shadowed by mask div and even the popup where I want to perform some action also going behind this shade.

Any solution for this?

Thanks & Regards,
Sreejith
Actions
3. Re: Background of Modal popup panel inside iframe

aungthawaye Jan 13, 2013 2:29 AM (in response to javaxchange)

Hi Sreejith,

What's the z-index for your popup box ? Mask's zindex must be lower than your popup's zindex. If you fix these z-index, hope it works.

Regards,
Aung
Actions

Go to original post