The component is a modal that can be used inside of a div to make a modal specific to that div. The only prop that's absolutely required is one specifying if the modal should be shown or not. You can add others if you wish...for example, you could have a prop that controls the overlay color when the modal is shown.

To keep things nicer IMO, I made the prop a boolean, and have a computed that converts the boolean into a style ('display' is 'none' when shown is false, and 'block' when shown is true).

To give control over what goes into the modal, I simply put a slot in the template.

All other details on the logic can be found in the div-specific modal post.

Since the modal is a slot, you can just drop in html. One really cool thing though. What if you want buttons/events in your modal? You can totally do that, and you can have them call methods in the parent if you want which is freaking great. It's really simple. If you have a button, add an @click to it, and set it equal to the method in the parent. E.g., @click='method1(3)' will call method1 and pass in the value 3 when the button is clicked.

One important note...the div containing the modal must have its position set to 'relative'.

There are no real tricks, and this was much simpler than I'd thought it was going to be.