CSS Modal window and iFrame - css

Question

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.
<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>
I'm trying to use this example: http://www.salesforcegeneral.com/salesforce-modal-dialog-box/

Answer 1

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