如何在 JavaScript 中自定义提醒？

Question

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

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

你知道如何自定义它吗？

提前致谢。

Answer 1

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

Answer 2

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

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

或者查看 bootstrap ，它大大简化了模态： https://getbootstrap.com/docs/4.0/components/modal/

Answer 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 控制模态框是否显示。

如何在 JavaScript 中自定义提醒？

How can I customize an alert in JavaScript?

reactjs

typescript

alerts