CSS Modal窗口和iFrame [英] CSS Modal window and iFrame

问题描述

以下CSS在iframe中打开一个模式窗口，因为它应该。但我想模态弹出窗口覆盖父，而不仅仅是在ifram。有没有办法修改CSS来获取弹出窗口覆盖父？正如一个旁注，iFrame的id可能会改变，所以我不能依靠一个特定的id。

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>

我试图使用此示例： http： //www.salesforcegeneral.com/salesforce-modal-dialog-box/

推荐答案

尝试更改您的 .custPopup 到：

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

这篇关于CSS Modal窗口和iFrame的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！