Abra el componente Lightning en un modal al hacer clic en un botón

Solución:

En la parte superior <div> incluir slds-modal slds-fade-in-open intente esto … consulte los documentos de LDS Modal para obtener más detalles.

<div class="slds-modal slds-fade-in-open">
      <div class="slds-modal__container">
        <div class="slds-modal__content slds-p-around--medium">
           <div>
            <c:CandidatePatientComponent></c:CandidatePatientComponent>
           </div>
        </div>
      </div>
    </div>

EDITAR

Comparto un código de ejemplo que podría ayudarlo. Al hacer clic en el botón, mostrar otro componente dentro de un modal

ComponenteA:

<aura:component >
    <ui:button label="openmodal" press="{!c.openmodal}"  />
   <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox" class="slds-modal">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeModal}">
                    <c:svgIcon svgPath="/resource/slds/assets/icons/utility-sprite/svg/symbols.svg#close"  size="small"  />
                    <span class="slds-assistive-text">Close</span>
                </button>
                <h2 id="header43" class="slds-text-heading--medium">Test Modal</h2>
            </div>
            <div class="slds-modal__content slds-p-around--medium">
                <div>
                    <c:componentB />
                </div>
            </div>
            <div class="slds-modal__footer">
            </div>
        </div>
    </div>
    <div class="slds-backdrop " aura:id="Modalbackdrop"></div>
</aura:component>

InCOntroller:

({
    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'); 
    },
    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'); 
    }
    
})

El enfoque preferible es tener un componente que represente la ventana modal.

El siguiente código muestra una ventana modal cuando el usuario hace clic en el botón y no depende de los trucos de estilo CSS.

No se requiere un título y puede definir los botones de control en el componente Base. Te ayuda a tener un componente, el que quieres renderizar en la ventana modal, sin lógica.

Componente base

 <aura:component description="Example usage of custom modal window for  Lead record edit">
    <aura:attribute name="lead" type="Lead" />

    <aura:attribute name="showModalEditLead" type="Boolean" default="false" />
    <aura:attribute name="showModalB" type="Boolean" default="false" />

    <lightning:button label="Open Edit Lead Modal" onclick="{!c.handleModalEditLeadOpen}" />
    <lightning:button label="Open Modal B" onclick="{!c.handleOpenModalB}" />

    <c:CustomModalComponent title="Lead Edit" isActive="{!v.showModalEditLead}">
        <!-- Content of the modal window -->
        <c:CustomLeadEdit record="{!v.lead}" />

        <aura:set attribute="footer">
            <lightning:button variant="neutral" label="Cancel" onclick="{!c.handleModalEditLeadCancel}" />
            <lightning:button variant="brand" label="Save" onclick="{!c.handleModalEditLeadSave}" />
        </aura:set>
    </c:CustomModalComponent>

    <c:CustomModalComponent isActive="{!v.showModalB}">
        Welcome to Modal B!
    </c:CustomModalComponent>
</aura:component>

Controlador base

({  
     handleModalEditLeadOpen: function(component) {
         component.set('v.showModalEditLead', true);
     },

     handleModalEditLeadCancel: function(component) {
         component.set('v.showModalEditLead', false);
     },

     handleModalEditLeadSave: function(component, event, helper) {
         /* Handle the Lead here */
         component.set('v.showModalEditLead', false);
     },

     handleOpenModalB: function(component) {
         component.set('v.showModalB', true);
     }
})

---

Componente CustomModal

<aura:component description="Component for rendering modal window" extensible="true">
    <aura:attribute name="isActive" type="Boolean" default="false" required="true" />
    <aura:attribute name="title" type="String" default="" required="false" />
    <aura:attribute name="footer" type="Aura.Component[]" required="false" />

    <div>
        <aura:renderIf isTrue="{!v.isActive}">
            <section role="dialog" tabindex="-1" aria-label="Meaningful description of the modal content" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <header class="{!'slds-modal__header' + (empty(v.title) ? ' slds-modal__header slds-modal__header_empty' : '')}">
                        <lightning:buttonIcon alternativeText="Close" onclick="{!c.handleCancel}" iconName="utility:close" variant="bare" size="large" class="slds-modal__close slds-button_icon-inverse" />

                        <aura:renderIf isTrue="{!not(empty(v.title))}">
                            <h2 class="slds-text-heading_medium slds-hyphenate">{!v.title}</h2>
                        </aura:renderIf>
                    </header>
                    <div class="slds-modal__content slds-p-around--large" id="modal-content-id-1">
                        {!v.body}
                    </div>
                    <footer class="slds-modal__footer">
                        {!v.footer}
                    </footer>
                </div>
            </section>
        </aura:renderIf>

        <div class="{!'slds-backdrop ' + ((v.isActive) ? 'slds-backdrop_open' : 'slds-backdrop_close')}"></div>
    </div>
</aura:component>

Controlador modal personalizado

({
    handleCancel: function(component) {
        component.set('v.isActive', false);
    }
})

---

Componente CustomLeadEdit

<aura:component description="Form for editing Lead record">
    <aura:attribute name="record" type="Lead" required="true" />

    <lightning:layout horizontalAlign="center">
        <lightning:layoutItem size="12" flexibility="auto">
           <ui:inputText label="First Name" value="{!v.record.FirstName}" />
        </lightning:layoutItem>

        <lightning:layoutItem size="12" flexibility="auto">
            <ui:inputText label="Last Name" value="{!v.record.LastName}" />
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

---

---

Utiliza Nuestro Buscador