Home Javascript Create Modals, Sidebars, Notifications, Pop-ups With CSS Transitions

Create Modals, Sidebars, Notifications, Pop-ups With CSS Transitions

Javascript webcodeflow · July 28, 2022 · Comments off

vue-over-body is a conditional creation, modals, sidebars, notifications, and windows pop-ups with CSS transitions!

vue popup window, vue transition slide down, vue js modal popup example, css transition modal, vue animation examples, vue transition v for

How to make use of it:

Install & Download:

npm install --save vue-over-body

Usage

import Vue from 'vue'
  import overBody from 'vue-over-body'

  new Vue({
    components: {
      'vue-over-body': overBody
    },
    data: function () {
      return {
        open: 1
      }
    }
  }).$mount('#app')

<vue-over-body :dim="false" :open="open" before="before" after="after" :transition="0.3">
    <div>
      <button @click="open = 0">&times;</button>
      <p>A little alert message!</p> 
      <p>For the users of your app!</p> 
    </div>
  </vue-over-body>

.before {
    top: 50px;
    right: -300px;
    width: 300px;
    background-color:yellow;
    position:absolute;
  }

  .after {
    right: 50px;
  }

vuejs popup with css transitions, vue-over-body Plugin/Github, vue transition group enter not working