4145

CSS Modal window and iFrame

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: <a href="http://www.salesforcegeneral.com/salesforce-modal-dialog-box/" rel="nofollow">http://www.salesforcegeneral.com/salesforce-modal-dialog-box/</a>

Answer1:

Try to change your .custPopup to:

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

Recommend

  • ExecuteCore() vs OnActionExecuting(ActionExecutingContext filterContext)?
  • CSS Modal window and iFrame
  • How do I extract a background= value from a string containing HTML in JavaScript?
  • Remove Google Maps iframe address popup
  • How to navigate a subframe inside a frameset using Selenium WebDriver with Python?
  • Lookup field in salesforce is null when saving
  • How can I create oracle apex server side live validation without need to submit page
  • WebDriver > switch between sibling frames
  • Updating and Deleting Records in Salesforce using REST API
  • How to add CSS class and control elements inside of the Iframe using javaScript.?
  • iframe with 0 height creates a gap
  • How to render a div 100% wide in Internet Explorer Quirksmode
  • How to restart Apache Apex application?
  • How invoke APEX method from custom button
  • Eclipse RCP - how to add mouselistener on the titlebar of an eclipse ScrolledForm
  • How to reload Oracle APEX 5.0 Tree dynamically
  • Could not install package 'Microsoft.Owin.Security 2.0.1'
  • How to force refresh on CallLog.Calls.CACHED_NAME column?
  • Submission of new app with iAds
  • testing a POST using phpunit in laravel 4
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • How to show dropdown in excel using jrxml (jasper api)?
  • what is the difference between the asp.net mvc application and asp.net web application
  • Web-crawler for facebook in python
  • A cron job substitute?
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • python draw pie shapes with colour filled
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?