Show Model In Full Page from Visual-force Tab in lightning console

Question

I have a requirement to open a Model box from a visualforce tab in the lighting console app. My model is stuck inside the console tab and not opening in the full window.

below is the code that I used for the model and I am opening this popup inside visualforce page

<template>
<template if:true={showPopup}>
    <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small"
        aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
        <div class="slds-modal__container">
            <header class="slds-modal__header" style="padding-bottom: 0;">
                //code for header
            </header>
            <div class="slds-modal__content slds-var-p-around_medium" id="modal-content-id-1">
                <div class="slds-box">
                    <lightning-formatted-rich-text value={modelContent.content}></lightning-formatted-rich-text>
                </div>
            </div>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open" onmousedown={closeModel}></div>
</template>

Actual Output:

Expected Output:

Answer 1

So as per my understanding, your VFPage might be inside an iframe as it is in Lightning console.

As the component is getting created in an iframe it might open on full screen.

To open on full screen, have a utility bar and add an LWC component wrapped inside an aura component in that, add a listener here (LMS or message event). From VF Page just post a message event to LWC component with all required attributes and open the modal from LWC. Then it should open on full page.