Need to Open an Aura component as a popup using a button inside a visual force page

Question

I want to open an Aura Component as a popup with a help of a button click in visual force page. Aura component contains set of records which will display in a table. Can any one help me with this. ?

Also does the Toast messages are supported when the Aura Component is inside an Aura App?

Answer 1

you can use lightning:isUrlAddressable and modals to display in as a pop up

 <aura:component implements="lightning:isUrlAddressable">
<aura:attribute name="recordIdfromVF" type="string"/>

    <div class="slds-modal__container">
        <header class="slds-modal__header">
            <lightning:buttonIcon iconName="utility:close"
                                    onclick="{! c.closeModel }"
                                    alternativeText="close"
                                    variant="bare-inverse"
                                    class="slds-modal__close"/>
            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">About Sfdcmonkey.com</h2>
        </header>
        
        <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            <p>

            <!--- ADD YOUR DATA TABLE HERE ---->
            
            </p>
        </div>
        <footer class="slds-modal__footer">
            <lightning:button variant="neutral" 
                                label="Cancel"
                                title="Cancel"
                                onclick="{! c.closeModel }"/>
            <lightning:button variant="brand" 
                                label="Like and Close"
                                title="Like and Close"
                                onclick="{! c.likenClose }"/>
        </footer>
    </div>
    </aura:component>

Aura controller :

    ({
        doAction : function(component, event, helper) {
  
            var recordId=component.get("v.recordIdfromVF");
            alert('Id from VF'+recordId);
        },
    openModel: function(component, event, helper) {
      // for Display Model,set the "isOpen" attribute to "true"
      component.set("v.isOpen", true);
   },
 
   closeModel: function(component, event, helper) {
      // for Hide/Close Model,set the "isOpen" attribute to "Fasle"  
      component.set("v.isOpen", false);
   },
     })

in your VF javascript function which you call on button click:

<apex:page standardController="account" >
    <apex:includeLightning />
    <div  id="LightningCompContainer" />
   
    <script>
        $Lightning.use("c:yourAuracmp", function() {
            $Lightning.createComponent("c:yourAuracmp", {
            },
            "LightningCompContainer",
            function(component) {
               component.set("v.recordIdfromVF",'{!$CurrentPage.parameters.id}');
            });
        });
        
    </script>
    </apex:page>