We can make use of SLDS Modal CSS and avoid the popup if we avoid the slds-container CSS class.
Please check the following sample Lightning Web Component for reference.
Sample Lightning Web Component:
HTML:
<template>
<div class="modal-header slds-modal__header">
<h4 class="title slds-text-heading--large">Title</h4>
</div>
<div class="slds-modal__content slds-p-around--x-large">
Sample Content
</div>
<div class="slds-modal__footer">
<div class="slds-align_absolute-center">
Footer
</div>
</div>
</template>
JavaScript:
import { LightningElement } from 'lwc';
export default class SampleLightningWebComponent extends LightningElement {
}
js-meta.xml:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>62.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>
Output: