[SalesForce] Display a Component as Modal in lightning

I had a similar challenge to build, but with a button. I managed to succesfully build a popup like you want, but I'm not 100% sure if it works in your code, but it's definitely worth a try.

Component

In your component you need two extra div's:

<div class="slds">
    <div aria-hidden="true" role="dialog" class="slds-modal slds-modal--prompt slds-fade-in-hide" aura:id="modaldialog">
        <div class="slds-modal__container">
            <div class="slds-modal__header slds-theme--info">
                <button class="slds-button slds-button--icon-inverse slds-notify__close" onclick="{!c.hidePopup}">
                    <c:svg aria-hidden="false" class="slds-button__icon slds-button__icon--large" xlinkHref="/resource/SLDS105/assets/icons/action-sprite/svg/symbols.svg#close">
                    </c:svg>
                    <span class="slds-assistive-text">Close</span>
                </button>
                <h2 class="slds-text-heading--medium">Your Title</h2>
            </div>
            <div class="slds-modal__content slds-p-around--medium">
                <div>
                    <p>{!v.body}</p>
                </div>
            </div>
        </div>
    </div>
</div>

This div is a hidden div (slds-fade-in-hide does that for you) which will display your form. The second div will display a dark background:

<div class="slds-backdrop slds-backdrop--hide" aura:id="backdrop">
</div>

Controller

I assume that you have a controller to render your form, and that this form is a different component. If not, you should consider building it, as it's really easy.

Your helper class should look like this:

function_name :  function(component, event, helper){
//called on clicking your button
//run your form render code after that, run the following lines
helper.showPopupHelper(component, 'modaldialog', 'slds-fade-in-');
helper.showPopupHelper(component,'backdrop','slds-backdrop--');
}

You'll also need a function to drop the screen (on cancel for example) as you can see in my component example, I called it hidePopup, this is what's in it:

helper.hidePopupHelper(component, 'modaldialog', 'slds-fade-in-');
helper.hidePopupHelper(component, 'backdrop', 'slds-backdrop--');

Helper

You'll need a couple of methods here:

1. The method to call the form component, I assume you know how to do this. The only thing you have to do here is put that component in v.body like this component.set("{!v.body}", component);

2. the showPopupHelper shows the correct popup

       showPopupHelper: function(component, componentId, className){
           var modal = component.find(componentId);
           $A.util.removeClass(modal, className + 'hide');
           $A.util.addClass(modal, className + 'open');
       },
   

3. the hidePopupHelper hides it when done and, because I use this popup for multiple components, it empties the body, so that next time you'll click it, you don't get the old body first.

       hidePopupHelper: function(component, componentId, className){
           var modal = component.find(componentId);
           $A.util.addClass(modal, className+'hide');
           $A.util.removeClass(modal, className+'open');
           component.set("v.body", "");
       },
   

I hope it's a bit clear for you, good luck!

I think a better approach to handle that would be as parent/child components:

On the List component include the details/child component:

<c:DetailArticle aura:id="detailArticle" />

Then add an aura:method on the details/child component - instead of the event:

<aura:method name="openArticle" action="{!c.openArticle}" access="PUBLIC"> 
    <aura:attribute name="articleId" type="String" />
</aura:method>

Now handle that method from your details/child component's controller:

openArticle : function(cmp, event) {
    var params = event.getParam('arguments');
    if (params) {
        var atrId = params.articleId;
        console.log("article id: " + atrId);
        // add the article to the details page
    }
}

Now on your parent list component controller, when you want to open the article detail page from your button list controller - fire the apexMethod event like that:

getDetail : function(component, event, helper){

    // 1. get the details component
    var details = component.find("DetailArticle")

    // 2. get the article id
    var articleId = event.target.getAttribute("data-recId");

    // 3. run the child component init (aura:method)
    details.openArticle(articleId);
}