Create a Custom Confirm Window - HTML, CSS & JavaScript Tutorial (Project)

Link to code:

In this video I'll be showing you how to create a completely custom Confirm Window using plain HTML, CSS & JavaScript - no libaries are required.

This will be fully customizable by the developer and allows callback functions for "OK" and "Cancel" to be passed in and called when the user interacts with the confirm window.

Support me on Patreon:

Follow me on Twitter @dcodeyt!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[TomasMisura]

thank you for this tutorial and the inspiration. Normaly I'd use simple alert popup because many times i don't want spend too much time with the customization of existing very often abadoned projects ( or simply too large) or but you've made something what's very tiny and easily customizable for any project...

[eelguneezmemmedov]

When i watch and accompany with u to coding i gotcha everything but when i try to it myself i get stuck
I decided to start watching your tutorials ..Thank u so much I hope after finishing tutorials and practising a lot i can write code like u

[EEQUALIZER]

This is absolutely beautiful. Could you explain why IE isn't able to handle this ? Which kind of polyfill is necessary ?

[elvinasbalciunas]

Thanks, very professional looking alert box :)

[McKinneyy]

hey! i know this is pretty old now but I'm trying to implement this, and i'm getting an error saying that confirm is not defined. I even get this error when i download your code from codepen and use it as it is there. It works fine in codepen but not in webstorm when I put it in there - is there something weird with webstorm that would cause this issue?

[photoinshot]

Brilliant tutorial, quite a lot of content so lots to learn, but very well explained so even a js novice like me can follow along easily, many thanks. Looking to use this instead of the default confirm dialog with a php delete button. Any tips from anyone greatly appreciated. Once again many thanks!

[pawpaaj]

Great video! Btw is this BEM naming convention you're using?

[davefinn]

Great video - lovely your clear explanations.

[vestige-healthbeauty]

Would you please let me know if instead of changing background if have close that window by clicking ok.
What I have to do?

[ygge]

Hi Dom, thank you for this tutorial. Is it ok to pass the call back in the this._close() so it will only trigger after the end of the animation

[btnClose, btnCancel].forEach((el) => {
el.addEventListener("click", (e) => {
this._close(confirmEl, options.onCancel);
});
});

_close(confirmEl, callBack) {


confirmEl.addEventListener("animationend", () => {

callBack();
});
}

[PixelNationInc]

Is it possible to replace the sync browser confirm dialog?

[btchriss]

How can I return a true/false instead of changing the color

[shahmaarbaba]

how to add different different image in content section

[vestige-healthbeauty]

Hi, plz help me it's very important.
I'll very thankful .