title: CSS Modal window and iFrame
body: <p>The following CSS opens a modal window within the iframe as it should. But I would like the modal popup to overlay the parent and not just within the ifram. Is there a way to modify the CSS to get the popup to overlay the parent?  Just as a side note, the id of the iFrame may change, so I won't be able to rely on a specific id. All suggestions are appreciated, I'd even consider another tool such as javascript.</p>
  
  <pre><code>&lt;iframe frameborder="no" height="200px" id="066E0000001KmQ9" marginheight="0"     marginwidth="0" name="066E0000001KmQ9" scrolling="no"     title="PredictiveWholesalingRelatedList" width="100%"&gt;      
  &lt;apex:page standardController="Contact" 
  extensions="myExtension"  
  sidebar="false" 
  showHeader="false"
  title="My Page"&gt;  
  
  
  &lt;apex:form &gt;
      &lt;apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="tstpopup"/&gt;
      &lt;apex:pageBlock &gt;
          This is just filler text from the Salesforce General.
      &lt;/apex:pageBlock&gt;
  
      &lt;apex:outputPanel id="tstpopup"&gt;
      &lt;apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/&gt;
          &lt;apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}"&gt;
              This is where I would put whatever information I needed to show to my end user.&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
              &lt;apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="tstpopup"/&gt;
          &lt;/apex:outputPanel&gt;
      &lt;/apex:outputPanel&gt;
  
  &lt;/apex:form&gt;
  
  &lt;style type="text/css"&gt;
      .custPopup{
          background-color: white;
          border-width: 2px;
          border-style: solid;
          z-index: 9999;
          left: 50%;
          padding:10px;
          position: absolute;
          width: 500px;
          margin-left: -250px;
          top:100px;
      }
      .popupBackground{
          background-color:black;
          opacity: 0.20;
          filter: alpha(opacity = 20);
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 9998;
      }
  
  &lt;/style&gt;
  </code></pre>
  
  <p></p>
  
  <p> </p>
  
  <p>I'm trying to use this example: <a href="http://www.salesforcegeneral.com/salesforce-modal-dialog-box/" rel="nofollow">http://www.salesforcegeneral.com/salesforce-modal-dialog-box/</a></p>