Kevin Powell - Community•12mo ago

How to make it?

Hello there, I wanted to clone this page, but I am confused when the user clicks on update information, the other page with multiple fields opened, what it is called? and how to make it. just wanted to know the process, please help me to clarify it. Thanks, Hamza

7 Replies

Mannix•12mo ago

modal?

Jochem•12mo ago

yes, that's a modal and you generally make them with a dialog element nowadays, using the .showModal() method

Hamza NaeemOP•12mo ago

ok, thank you I think it is JS stuff, I will see what it is, as I am on HTML CSS right now. Thank you again

Jochem•12mo ago

it is, but it's like two lines. Kevin has a video on it somewhere I think, if you search for dialog tag

Hamza NaeemOP•12mo ago

Ok thank you Thank you so much Modal is workinf but it is stick to top left instead of center https://codepen.io/hamzacodepen951/pen/LYqBgXb check plz it could be cenered using margin: auto; but I see in tutorial that their modal was alredy centered

Mannix•12mo ago

don't nuke the margin on the dialog element

* {
  padding: 0;
  font-family: var(--text-font-family);
}
*:not(dialog) {
  margin: 0;
}

* {
  padding: 0;
  font-family: var(--text-font-family);
}
*:not(dialog) {
  margin: 0;
}

Jochem•12mo ago

what Mannix said. Basically, it is centered by default using margin: auto, but using * { margin: 0;} overrides that on dialog. It's part of why I don't like to set margin: 0; on *

Gaming

Programming

How to make it?