Element dialog

method=“dialog” tells our application that when the form gets submitted, the modal needs to be
close automatically.

Styling To style our dialog we can use normal CSS properties, the only relevant and special thing is that if you want to change the background behind the modal you can use the pseudo-element ::backdrop, example:

dialog::backdrop { background: rgba(0, 0, 0, 0.7); }

Example react

import React, { useRef } from “react”;

function App() { const dialogRef = useRef();

const openModal = () => { dialogRef.current.showModal(); };

const onCancel = () => { dialogRef.current.close(); };

const onSubmit = (e) => { console.log({ name: e.target.name.value, email: e.target.email.value, }); };

return ( <>

  <button onClick={openModal}>Show Modal</button>
</>

); }

export default App;