在屏幕上居中 window.confirm 对话框

Question

I have the following dialog box that is working correctly, however, I can't get it to center on the page:

<Button variant="danger" onClick={() => { if (window.confirm('Delete character?')) handleCharacterDeletion(row.original) }}>DELETE</Button>

The box appears on the top of the page, but I want it centered in the middle.

I tried wrapping the whole thing in a tag, but that actaully didn't do one little thing.

Is there way to get my dialog centered?

Thank you

Answer 1

It's not possible to center a Window interface (ex: window.alert, window.confirm...) because it's native to your web-browser.

However, you can make a modal with libraries ( Micromodal , Fancybox ) or from scratch.