KPC
Kevin Powell - Community•2y ago
Hamza Naeem

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
Mannix•2y ago
modal?
Jochem
Jochem•2y ago
yes, that's a modal and you generally make them with a dialog element nowadays, using the .showModal() method
Hamza Naeem
Hamza NaeemOP•2y 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
Jochem•2y 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 Naeem
Hamza NaeemOP•17mo 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
Mannix•17mo 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
Jochem•17mo 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 *

Did you find this page helpful?