JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jsfiddle.net/gj2yfrmp/"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.9/dialog-polyfill.min.js"></script>
<dialog id="dialog">
  你喜歡吃：<br>
  <button id="opt1">滷肉飯</button>
  <button id="opt2">肉燥飯</button>
  <button id="opt3">雞肉飯</button>
</dialog>

<button id="open">
  問個問題
</button>

<span id="result"></span>

JavaScript

const $dialog = document.getElementById('dialog');
const $result = document.getElementById('result');
const $open = document.getElementById('open');
const $opt1 = document.getElementById('opt1');
const $opt2 = document.getElementById('opt2');
const $opt3 = document.getElementById('opt3');

// dialog-polyfill
dialogPolyfill.registerDialog($dialog);

$open.addEventListener('click', e => $dialog.showModal());
$opt1.addEventListener('click', e => $dialog.close('北部人'));
$opt2.addEventListener('click', e => $dialog.close('南部人'));
$opt3.addEventListener('click', e => $dialog.close('嘉義人'));

$dialog.addEventListener('close', e => {
  $result.textContent = $dialog.returnValue ? `你是${$dialog.returnValue}` : '';
});

$dialog.addEventListener('click', e => {
  // 使用者按下背景，關閉對話框。
	if (e.target === $dialog) $dialog.close();
});