full screen modal in vuejs version 3 using teleport feature in javascript

index.tsx
npm install vue-teleport
25 chars
2 lines

index.tsx
import { defineComponent } from 'vue'
import { Teleport } from 'vue-teleport'
78 chars
3 lines

index.tsx
const Modal = defineComponent({
  props: {
    show: Boolean,
  },
  setup(props, { slots }) {
    return () => {
      if (!props.show) return null
      return (
        <Teleport to="#modal-root">
          <div class="modal-bg">
            <div class="modal-content">
              {slots.default && slots.default()}
            </div>
          </div>
        </Teleport>
      )
    }
  }
})
399 chars
20 lines

index.tsx
const App = defineComponent({
  setup() {
    return () => (
      <div>
        <div id="modal-root"></div>
        <Modal show={true}>Modal Content Goes Here</Modal>
      </div>
    )
  }
})
194 chars
11 lines

.modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 1rem;
  border-radius: 0.25rem;
  max-width: 80%;
  max-height: 80%;
  overflow: auto;
}
337 chars
21 lines