如何在 JavaScript 中自定义警报？

Posted 2023-03-13

【中文标题】如何在 JavaScript 中自定义警报？

【英文标题】：How can I customize an alert in JavaScript?

【发布时间】：2020-05-11 08:09:48

【问题描述】：

我在 React 中使用 TypeScript。我想创建自定义警报并向其中添加图像。我用了 这个方法：

private alert() 
    alert("This is an Alert Dialog");
  

你知道如何自定义它吗？

比提前提示。

【问题讨论】：

警告框不能自定义

这能回答你的问题吗？ How to change the style of alert box?

【参考方案1】：

您可能想要寻找的是一个模态框， 您可以设置样式以显示警报。

此页面可以帮助您入门： https://www.w3schools.com/howto/howto_css_modals.asp

或者查看大大简化模态的引导程序： https://getbootstrap.com/docs/4.0/components/modal/

【参考方案2】：

警告框是一个系统对象，不受 CSS 约束。您可能希望为此使用第三方库或添加自己的警报弹出窗口。无论哪种方式，您都无法设置默认警报框的样式。

【讨论】：

您可以在这里找到更多信息***.com/questions/7853130/…

【参考方案3】：

您需要使用模态。这是一个示例：

import React from "react";

export const Modal = (modalContent, style) => 

    return (
        <div className="modal" style=style>
            modalContent
        </div>
    );
;

而用法是这样的：

import  Modal  from '../Shared/Modal';

....

                this.state.Modal && <Modal style= animation: "fadeIn 1s, scaleUp 1s" 
                    modalContent=
                        <div className="Add-BillRange">
                           <h1> MODAL </h1>
                        </div>
                    
                />

this.state.Modal 控制是否显示模态框。