Salesforce Overlay Library Workaround

Question

The Lightning component are built using overlay library , However to reuse the same in visualforce page we have to do workaround which includes nested component or dynamic creation of component. Is there any quick way around where by we can pass the instance like :

var params = {
                header: "Header", 
                body: component 1 instance , 
                footer: component 2 instance, 
                cssClass: "",
                showCloseButton: true
            };

and passing the same in modal. To have it dyanamically created. Else a way to use using lightning nested component creation :

$A.createComponents([
    ["ui:message",{
        "title" : "Sample Thrown Error",
        "severity" : "error",
    }],
    ["ui:outputText",{
        "value" : e.message
    }]
    ],
    function(components, status, errorMessage){
        if (status === "SUCCESS") {
            var message = components[0];
            var outputText = components[1];
            // set the body of the ui:message to be the ui:outputText
            message.set("v.body", outputText);
        }
        else if (status === "INCOMPLETE") {
            console.log("No response from server or client is offline.")
            // Show offline error
        }
        else if (status === "ERROR") {
            console.log("Error: " + errorMessage);
            // Show error message
        }
    }
);

Answer 1

As the documentation says, you can't use lightning:overlayLibrary in Lightning Out. You'd need to use your own. You might look at strike_modal instead. You'll need to create a component that will dynamically create the other components, and your dependency app must list all components that will be used dynamically.