0

on click of a button, am opening an iframe using div. I would like to open the pop-up independent of parent window. i.e., after opening a pop-up, user should be able to work on parent window. He can work on both windows parallel...

Right now a popup window opens, and am able to scroll the parent window, but cannot click on anything, and the pop-up window doesn't back off...

   <ui:button class="slds-button slds-button--neutral cuf-publisherShareButton qe-textPostDesktop WIDE uiButton--default uiButton--brand uiButton" 
          label="Click to Upload File" press="{!c.openmodal}"  />
<div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox" class="slds-modal slds-fade-in-open" data-dismiss="modal">
    <div class="slds-modal__container customHeight">
        <div style="padding-left:5px;padding:22px;" 
             class="slds-modal__header slds-text-align--center slds-form-element__control lookup__search-control slds-input-has-icon slds-input-has-icon--left">                
            <lightning:button onclick="{! c.closeModal}" class="slds-button slds-modal__close slds-button--icon-inverse customPadding">
                <lightning:icon iconName="utility:close" size="small"/>                    
            </lightning:button>
        </div>
        <div style="height:424px;background: rgb(255, 255, 255);overflow-wrap: break-word;word-wrap: break-word; width:608px;padding-left:5px;">
            <div>
                <div>                  
                    <iframe id="ibmuploader" frameborder="0" 
                    src="{!v.customUrl+ '?case_id=' + v.SelectedCase.CaseNumber + '&amp;dir=aix&amp;client=SupportCommunity&amp;targetPage=upload_sf&amp;email_address=' + v.Email + ''}"/>              
                </div>
            </div>
        </div>
        <div style="padding-left:5px;" class="slds-modal__footer">
        </div>
    </div>
</div>



openmodal:function(component,event,helper){    
    var cmpTarget = component.find('Modalbox');
    var cmpBack = component.find('Modalbackdrop');
    $A.util.addClass(cmpTarget, 'slds-fade-in-open');
    $A.util.addClass(cmpBack, 'slds-backdrop--open');        
}, 
closeModal:function(component,event,helper){    
    var cmpTarget = component.find('Modalbox');
    var cmpBack = component.find('Modalbackdrop');
    $A.util.removeClass(cmpBack,'slds-backdrop--open');
    $A.util.removeClass(cmpTarget, 'slds-fade-in-open'); 
}
2
  • The backdrop component is the one that hides the whole page - you can stop hiding it and the modal would open with the background available Jul 25, 2017 at 7:16
  • background is available, i removed the Modalbackdrop, its just that it doesn't let me work on the background page... Jul 25, 2017 at 16:42

0

You must log in to answer this question.

Browse other questions tagged .