如何在SweetAlert JS弹窗中添加带黑字的黄色警告样式文本框

完全可以在现有脚本基础上实现需求，不需要替换插件或引入额外依赖，核心利用SweetAlert原生支持的html配置项传入自定义HTML片段的能力即可完成。

具体实现逻辑 #

• 适配警告效果的视觉参数：黄底选用和警告语义匹配的浅暖黄色#fff3cd，文本为纯黑色#000，搭配基础内边距、圆角和浅边框，避免和弹窗原有视觉风格突兀。
• 对新手最友好的实现方式是给自定义块写内联样式，不需要单独引入CSS文件，也不会被SweetAlert的默认全局样式意外覆盖，排查问题成本最低。
• 只需要修改原有Swal.fire配置中html字段的内容，将原本直接传入的TextContentDialog1和自定义黄底警告块做字符串拼接即可，其余原有配置（弹窗动画、按钮样式、点击/按键屏蔽规则等）完全不用改动。

修改后的参考代码 #

var Functions;
(function(Functions) {
    var MyNamespace;
    (function(MyNamespace) {
        function PopUp_UnloadRecipe(OutputSignal, TextHeaderDialog1, TextContentDialog1, TextHeaderDialog2, TextContentDialog2, TextButton1Dialog1) {
            Swal.fire({
                title: TextHeaderDialog1,
                showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                },
                // 原有弹窗内容 + 自定义黄底黑字警告块
                html: `${TextContentDialog1}
                    <div style="background: #fff3cd; color: #000; padding: 12px; border-radius: 4px; margin: 16px 0; border: 1px solid #ffeeba;">
                        此处填入需要展示的警告提示文本
                    </div>
                `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                backdrop: 'rgba(0,0,0,0.4)',
                allowOutsideClick: false,
                allowEscapeKey: false,
                // 修正原有转义写法，保证footer正常渲染
                footer: '<b><h1>WARNING!</h1></b>',
                confirmButtonText: TextButton1Dialog1
            }).then((result) => {
                if (result.value) {
                    Swal.fire(
                        TextHeaderDialog2,
                        TextContentDialog2,
                        'success'
                    )
                    OutputSignal.write(true);
                }
            });
        }
      
        MyNamespace.PopUp_UnloadRecipe = PopUp_UnloadRecipe;
      
    })(MyNamespace = Functions.MyNamespace || (Functions.MyNamespace = {}));
  
    Functions.registerFunctionEx('PopUp_UnloadRecipe', 'TcHmi.Functions.MyNamespace', MyNamespace.PopUp_UnloadRecipe);
})(Functions = TcHmi.Functions || (TcHmi.Functions = {}));
})(TcHmi);

新手实操注意事项 #

• 不要删除原有icon: 'warning'的配置，和自定义黄底警告块的视觉语义完全适配，不会出现风格冲突。
• 自定义警告块放在主内容区（即html参数对应的区域），和通用警告弹窗的布局逻辑一致，不需要调整位置到footer区域。
• 原有代码的footer字段使用了HTML实体转义写法（即<这类字符），实际运行时会直接显示源码字符而非渲染成加粗标题，改成正常的HTML标签写法即可生效。
• 如果需要调整黄色块的深浅，直接修改background对应的色值即可，不需要调整其他样式参数。

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