CSS模式窗口和iFrame

Question

以下CSS會在iframe中打開模式窗口，因爲它應該如此。但我希望模態彈出框覆蓋父項，而不僅僅是在ifram中。有沒有辦法修改CSS讓彈出來覆蓋父項？就像旁註一樣，iFrame的id可能會改變，所以我將無法依靠特定的id。所有的建議表示讚賞，我甚至會考慮另一個工具，如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; 
}