Display Visual force Page on top of Detail Page

Question

I am currently trying to override the Add Products button on opportunity detail page to show a lightning component. For this I have created a visual force page and calling the Lightning Component(Modal) from it. But this navigates page from the detail page to the component page. My question is is there any way we can show the modal in the visual force page on the detail page itself? or is there any other why in which i will have to create my visual force page? I have included the code for the page below.

<apex:page standardController="Opportunity">
<apex:includeScript value="/lightning/lightning.out.js" />
<script>
var profile = '{!$Profile.Name}';
$Lightning.use("c:ModalApp", function() {
    $Lightning.createComponent(
        "c:Modal",
        { "recordId" : '{!$CurrentPage.parameters.oppId}',
         "profile" : profile},
        "theOpp",
        function(cmp) {
            console.log("Component created!");
            console.log(cmp);
        });
});
</script>
<div id="theOpp"></div>

Answer 1

You can achieve this by using a Lightning Component alone. There is an interface called lightning:actionOverride by which we can call a lightning component from actions / buttons.

Refer here for details.