JeffreyWay/Modal.vue

## app.js
let setVh = () => {
    let vh = window.innerHeight * .01;

    document.documentElement.style.setProperty('--vh', `${vh}px`);
};

window.addEventListener('load', setVh);
window.addEventListener('resize', setVh, { passive: true });

## example.html
<!doctype html>
<html class="h-full" lang="en">
<head>
    <title>Example</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <script src="/js/app.js" defer></script>
</head>

<body class="h-full">
    <div id="root" class="grid place-items-center min-h-full">
        <button @click="showModal = true" class="border px-4 py-2 rounded-xl">Open Modal</button>

        <Modal :open="showModal" @close="showModal = false">
            <div class="h-full flex justify-center items-center">
                <h1 class="font-bold">Hello, World</h1>
            </div>
        </Modal>
    </div>
</body>
</html>


## Modal.vue
<template>
    <Teleport to="body">
        <div v-show="open"
             class="fixed z-10 inset-0 overflow-y-hidden h-full"
             role="dialog"
             aria-modal="true"
        >
            <div class="flex items-center justify-center min-h-full text-center">
                <!--  Overlay -->
                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"
                     @click="$emit('close')"></div>

                <div
                    ref="modal-inner"
                    class="block bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all max-w-lg w-full mx-4"
                    style="max-height: 700px;"
                >
                    <slot/>
                </div>
            </div>
        </div>
    </Teleport>
</template>

<script>
export default {
    emits: ['close'],

    props: {
        open: {
            type: Boolean,
            default: false
        }
    },

    mounted() {
        // Can also be defined as a CSS rule.
       this.$refs['modal-inner'].style.height = 'calc(var(--vh, 1vh) * 90)';
    }
}
</script>
	let setVh = () => {
	let vh = window.innerHeight * .01;

	document.documentElement.style.setProperty('--vh', `${vh}px`);
	};

	window.addEventListener('load', setVh);
	window.addEventListener('resize', setVh, { passive: true });
	<!doctype html>
	<html class="h-full" lang="en">
	<head>
	<title>Example</title>
	<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
	<script src="/js/app.js" defer></script>
	</head>

	<body class="h-full">
	<div id="root" class="grid place-items-center min-h-full">
	<button @click="showModal = true" class="border px-4 py-2 rounded-xl">Open Modal</button>

	<Modal :open="showModal" @close="showModal = false">
	<div class="h-full flex justify-center items-center">
	<h1 class="font-bold">Hello, World</h1>
	</div>
	</Modal>
	</div>
	</body>
	</html>
	<template>
	<Teleport to="body">
	<div v-show="open"
	class="fixed z-10 inset-0 overflow-y-hidden h-full"
	role="dialog"
	aria-modal="true"
	>
	<div class="flex items-center justify-center min-h-full text-center">
	<!-- Overlay -->
	<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"
	@click="$emit('close')"></div>

	<div
	ref="modal-inner"
	class="block bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all max-w-lg w-full mx-4"
	style="max-height: 700px;"
	>
	<slot/>
	</div>
	</div>
	</div>
	</Teleport>
	</template>

	<script>
	export default {
	emits: ['close'],

	props: {
	open: {
	type: Boolean,
	default: false
	}
	},

	mounted() {
	// Can also be defined as a CSS rule.
	this.$refs['modal-inner'].style.height = 'calc(var(--vh, 1vh) * 90)';
	}
	}
	</script>