skysan87/vue-modal-dialog.html

## vue-modal-dialog.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
  </script>
  <title>Modal Dialog Sample</title>
</head>

<body>
  <div id="app">
    <input type="text" />
    <button @click="openDialog">Show Dialog</button>

    <!-- @cancel.prevent: prevent `escape` -->
    <dialog ref="dialog" @cancel.prevent >
      <input type="text" />
      <button @click="closeDialog">Close</button>
    </dialog>

  </div>
</body>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup () {
      const dialog = ref(null)

      return {
        dialog,
        openDialog: () => {
          dialog.value?.showModal()
          dialog.value?.addEventListener('close', () => {
            console.log('close_reason:', dialog.value.returnValue)
          }, { once: true })
        },
        closeDialog: () => {
          dialog.value?.close('close_reason_user_control')
        }
      }
    }
  }).mount('#app')
</script>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script type="importmap">
	{
	"imports": {
	"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
	}
	}
	</script>
	<title>Modal Dialog Sample</title>
	</head>

	<body>
	<div id="app">
	<input type="text" />
	<button @click="openDialog">Show Dialog</button>

	<!-- @cancel.prevent: prevent `escape` -->
	<dialog ref="dialog" @cancel.prevent >
	<input type="text" />
	<button @click="closeDialog">Close</button>
	</dialog>

	</div>
	</body>

	<script type="module">
	import { createApp, ref } from 'vue'

	createApp({
	setup () {
	const dialog = ref(null)

	return {
	dialog,
	openDialog: () => {
	dialog.value?.showModal()
	dialog.value?.addEventListener('close', () => {
	console.log('close_reason:', dialog.value.returnValue)
	}, { once: true })
	},
	closeDialog: () => {
	dialog.value?.close('close_reason_user_control')
	}
	}
	}
	}).mount('#app')
	</script>

	</html>