3 Replies Latest reply on Jan 13, 2013 2:29 AM by Aung Thaw Aye

    Background of Modal popup panel inside iframe

    Sreejith PS Newbie

      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

        • 1. Re: Background of Modal popup panel inside iframe
          Aung Thaw Aye Newbie

          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
          • 2. Re: Background of Modal popup panel inside iframe
            Sreejith PS Newbie

            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

            • 3. Re: Background of Modal popup panel inside iframe
              Aung Thaw Aye Newbie

              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