Vue Popup Opening closing the popup Example

Use the popup to render any content or form in a modal box that can be programmatically shown or hidden. For that the isOpen option can be used.

To check whether the popup is opened or not, use the isVisible method.

Get started with this example

Javascript jQuery Angular React Vue

                    <script setup>
  const isPopupOpen = ref(false)  
</script>

<template>
  <MbscButton @click="isPopupOpen = true">
    Open popup
  </MbscButton>
  <MbscPopup display="center" :isOpen="isPopupOpen" @close="isPopupOpen = false">
    <!-- popup content -->
    <MbscButton @click="isPopupOpen = false">
      Close
    </MbscButton>
  </MbscPopup>
</template>
                        
                        
                        
                