How can I customize an alert in JavaScript?

Question

I am using TypeScript in React. I would like to create custom alerts and add to them images. I used this method:

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

Do you have any idea how to customize it?

Thans in advance for tips.

Does this answer your question? [How to change the style of alert box?](https://stackoverflow.com/questions/7853130/how-to-change-the-style-of-alert-box) — Roy, May 11 '20 at 08:13

score 1 · Answer 1 · answered May 11 '20 at 08:10

1

The alert box is a system object, and not subject to CSS. You might want to use a third party library for that or add your own alert popup. Either way you can't style the default alert box.

answered May 11 '20 at 08:10

Roy

1,612
2
12
38

You can find more information here https://stackoverflow.com/questions/7853130/how-to-change-the-style-of-alert-box – Roy May 11 '20 at 08:13

score 1 · Accepted Answer · answered May 11 '20 at 09:15

What you may want to look for is a modal box, as you could style that so display alerts.

This page can help you get started: https://www.w3schools.com/howto/howto_css_modals.asp

Or look into bootstrap which simplifies modals a lot: https://getbootstrap.com/docs/4.0/components/modal/

score 0 · Answer 3 · answered May 11 '20 at 09:27

You need to use modals. Here it is a sample:

import React from "react";

export const Modal = ({modalContent, style}) => {

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

And usage is like this:

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 controls if the modal should be showed or not.

How can I customize an alert in JavaScript?

3 Answers3