如何移除Lightning模态弹窗及Lightning界面模态弹窗中的保存、取消按钮？如何移除Lightning模态弹窗中禁用的保存按钮？

嘿，我来帮你梳理这几个关于Lightning模态弹窗按钮的问题，都是开发中常遇到的场景，分情况给你讲清楚解决方案：

1. 移除模态弹窗中的保存与取消按钮 #

这个得看你使用的模态组件类型，分两种主流场景处理：

场景一：LWC的lightning-modal组件 #

如果用的是Salesforce官方的LWC模态组件，最简单的方式是隐藏整个页脚来移除默认的保存/取消按钮。你可以在定义模态类时直接设置静态属性，或者在调用模态时传入参数：

// 自定义模态组件的JS文件
import LightningModal from 'lightning/modal';

export default class CustomModal extends LightningModal {
    static hideFooter = true; // 直接隐藏页脚，按钮自然消失
}

或者在父组件调用时传入属性：

<!-- 父组件HTML -->
<c-custom-modal hide-footer></c-custom-modal>

如果只想移除特定按钮、保留页脚，那可以完全自定义页脚内容，替换默认按钮组：

<!-- 自定义模态的HTML -->
<template>
    <lightning-modal-header label="我的自定义模态"></lightning-modal-header>
    <lightning-modal-body>
        <!-- 这里放模态内容 -->
    </lightning-modal-body>
    <lightning-modal-footer>
        <!-- 只保留你需要的按钮，或者空着 -->
        <lightning-button label="关闭" onclick={handleClose}></lightning-button>
    </lightning-modal-footer>
</template>

场景二：Aura的force:recordEditModal或自定义模态 #

如果是Aura的标准记录编辑模态，你可以用showCancelButton="false"隐藏取消按钮，但保存按钮默认绑定记录保存逻辑。如果完全不需要这两个按钮，更推荐自定义Aura模态组件，自己控制页脚：

<!-- Aura自定义模态组件 -->
<aura:component>
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <header class="slds-modal__header">
                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">自定义模态</h2>
            </header>
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <!-- 模态内容 -->
            </div>
            <footer class="slds-modal__footer">
                <!-- 只放需要的按钮，或者空着 -->
                <lightning-button label="关闭" onclick="{!c.handleClose}"></lightning-button>
            </footer>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open"></div>
</aura:component>

如果一定要用标准force:recordEditModal并隐藏按钮，也可以用CSS应急（不推荐，可能因Salesforce UI更新失效）：

.THIS .slds-modal__footer .slds-button_neutral,
.THIS .slds-modal__footer .slds-button_brand {
    display: none !important;
}

2. 移除Lightning界面模态弹窗中的保存与取消按钮 #

这个和第一个问题本质一致，只是场景是Lightning界面（比如记录页的快速动作模态）。如果是自定义快速动作的模态，直接用上面LWC/Aura的方法处理即可。如果是系统自带的模态（比如标准记录编辑快速动作），只能通过自定义快速动作替换系统默认动作，自己实现模态逻辑，从而完全控制按钮显示。

举个例子：创建一个LWC快速动作，调用自定义隐藏按钮的模态，这样在Lightning界面点击动作时，弹出的模态就不会有保存/取消按钮。

3. 移除处于禁用状态的保存按钮 #

当保存按钮禁用时，我们可以通过组件逻辑或DOM操作隐藏它，分两种场景：

场景一：LWC自定义模态 #

在自定义模态中，你可以通过计算属性控制按钮的显示类名，当按钮禁用时自动隐藏：

<!-- 自定义模态的页脚 -->
<lightning-modal-footer>
    <lightning-button 
        label="保存" 
        disabled={isSaveDisabled}
        class={saveButtonDisplayClass}
        onclick={handleSave}></lightning-button>
    <lightning-button label="取消" onclick={handleClose}></lightning-button>
</lightning-modal-footer>

在JS中计算类名：

get saveButtonDisplayClass() {
    return this.isSaveDisabled ? 'slds-hide' : '';
}

这样当isSaveDisabled为true时，保存按钮会自动隐藏。

场景二：标准模态（如force:recordEditModal） #

对于标准模态，我们可以通过监听DOM变化来隐藏禁用的保存按钮。在Aura组件的renderer.js中实现：

({
    afterRender: function(component, helper) {
        this.superAfterRender();
        // 获取保存按钮元素
        let saveButton = document.querySelector('.slds-modal__footer .slds-button_brand');
        if (!saveButton) return;

        // 初始状态判断
        if (saveButton.disabled) {
            saveButton.style.display = 'none';
        }

        // 监听按钮禁用状态变化
        const observer = new MutationObserver((mutations) => {
            mutations.forEach(mutation => {
                if (mutation.attributeName === 'disabled') {
                    saveButton.style.display = saveButton.disabled ? 'none' : 'inline-block';
                }
            });
        });
        observer.observe(saveButton, { attributes: true });
    }
})

注意：直接操作DOM需谨慎，优先使用组件自带API，避免因Salesforce UI更新导致代码失效。

内容的提问来源于stack exchange，提问作者Ravi Shah