CSS Модальное окно и iFrame

Question

Следующий CSS открывает модальное окно в iframe, как и должно быть. Но мне хотелось бы, чтобы модальное всплывающее окно перекрывало родителя, а не только внутри ifram. Есть ли способ изменить CSS, чтобы всплывающее окно перекрывало родителя? Как примечание, идентификатор iFrame может измениться, поэтому я не буду опираться на определенный идентификатор. Все предложения приветствуются, я бы даже рассмотрел другой инструмент, такой как javascript.

<iframe frameborder="no" height="200px" id="066E0000001KmQ9" marginheight="0"  marginwidth="0" name="066E0000001KmQ9" scrolling="no"  title="PredictiveWholesalingRelatedList" width="100%">  
<apex:page standardController="Contact" 
extensions="myExtension" 
sidebar="false" 
showHeader="false" 
title="My Page"> 


<apex:form > 
    <apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="tstpopup"/> 
    <apex:pageBlock > 
     This is just filler text from the Salesforce General. 
    </apex:pageBlock> 

    <apex:outputPanel id="tstpopup"> 
    <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/> 
     <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}"> 
      This is where I would put whatever information I needed to show to my end user.<br/><br/><br/> 
      <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="tstpopup"/> 
     </apex:outputPanel> 
    </apex:outputPanel> 

</apex:form> 

<style type="text/css"> 
    .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; 
    } 

</style> 

Я пытаюсь использовать этот пример: http://www.salesforcegeneral.com/salesforce-modal-dialog-box/

Answer 1

Попробуйте изменить .custPopup на:

.custPopup{ 
    background-color: white; 
    border-width: 2px; 
    border-style: solid; 
    z-index: 9999; 
    padding:10px; 
}