close dialog cancel event

close-dialog-cancel-event.markdown

close dialog cancel event

A Pen by web.dev on CodePen.

License.

index.html

<dialog id="dialog">
    <form>
    <button type="submit" aria-label="close" formmethod="dialog" formnovalidate>X</button>
    <h2 id="dialogid">MLW Registration</h2>
    <p>All fields are required</p>
    <p>
        <label>Name:
           <input type="text" name="name" required />
       </label>
    </p>
    <p>
       <label>Warranty:
          <input type="number" min="0" max="10" step=”1” name="warranty" required />
        </label>
    </p>
    <p>
       <label>Power source:
           <select name="powersoure">
          <option>AC/DC</option>
          <option>Battery</option>
          <option>Solar</option>
           </select>
       </label>
    </p>
    <p>
       <button type="submit" formmethod="post">Submit</button>
    </p>
 <hr/>
    <p>Additional buttons</p>
      <button id="jsbutton">JS close</button>
      <button id="reset" type="reset">Reset</button>
    </p>
  </form>
</dialog>

<button id="modal">Open Modal dialog</button>
<p id="text"></p>
<hr/>
<h2>Random interactive elements</h2>
<p>Before opening the dialog, tab thru these interactive elements. Then try again when the dialog is open.</p>
<p>When the dialog is open, are any of these normally interactive elements interactive?</p>
<p><a href="https://machinelearningworkshop.com">Machine Learning Workshop</a></p>
  <p><label>Here is a useless input: <input></label></p>
      <p>
       <label>Here is a useless select:
           <select name="yummy">
          <option>Maple Syrup</option>
          <option>Ice Cream</option>
          <option>Bacon</option>
           </select>
       </label>
    </p>

script.js

const dialog = document.getElementById('dialog');
const text = document.getElementById('text');
const jsbutton = document.getElementById('jsbutton');
const modal = document.getElementById('modal');
const reset = document.getElementById('reset');

modal.addEventListener('click', (event) => {
  dialog.showModal();
  text.textContent = '';
});

jsbutton.addEventListener('click', (event) => {
  dialog.close();
  text.innerHTML += '"JS close" closed the dialog.<br/>';
});


dialog.addEventListener('cancel', (event) => {
  text.innerHTML += 'cance event happened<br/>';
});

dialog.addEventListener('close', (event) => {
  text.innerHTML += 'close event happened<br/>';
});

style.css

body {
  background: #a4bacc99;
  color: #226daa;
  font-family: Raleway, sans-serif;
  accent-color: #226DAA;
}
a:hover, a:focus {
  text-underline-offset: 0.25em;
}
[aria-label="close"] {
  appearance: none;
  float: right;
  border: 1px solid;
  border-radius: 50%;
}
dialog :focus {
  outline: 2px solid #226DAA;
}