Styling the modal dialog

[00:01] Moving on to the modal itself, let's import the dialog and dialog overlay components from HeadlessUI, register them, and then start using them under the button.

[00:17] We'll do dialog, and then inside it dialog overlay, and then a div to hold the model contents. Now, the dialog component requires an open prop, so let's set it to isOpen. And then the dialog also emits a closed event when the escape key is pressed, or when the user clicks on the dialog overlay. So let's add that as well. On close, we'll set isOpen to false.

[00:45] Before we continue styling the dialog element, let's make sure we expose an isOpen reactive object. I'll go here in the setup, add const isOpen = ref(true), and set the default value to true, expose it, and let's also import the ref function from vue.

[01:10] Let's continue with the styling. For the dialog, we want it to be a fixed element that will take up the whole screen. So we'll do fixed inset-0, and to make sure it shows over any other element in the page, we'll set its index to a high number like z-50, and then use flex justify-center to center the model contents on the screen.

[01:32] For the dialog overlay, we'll need to make it stretch all over the screen and have like a transparent background. So we'll do fixed inset-0 bg-black and then bg-opacity-70. Finally, the model content can be something like w-full max-w-2xl to reduce its width, bg-white rounded-lg to make it rounded, mx-4 to add some horizontal margin, and to set the maximum height value, we'll hardcode it using max-h-[80vh], and then square brackets, 80vh, which represents 80% of the viewport. Let's also add some margin top, and finally, let's add relative to bring it on top of the overlay. To prevent the model from stretching we can go to its parent this flex here, and say items-start.