I've read through innumerable posts about how to do this with jquery, but Vue.js jealously owns and manages the dom, so I will need a solution that uses standard Vue.js components or libraries.
Thus far, I've located several examples that are what I'd call 'button-event-driven' solutions, but I will need to programmatically handle open and close of the modal.
Problem / Design Requirement: When a public user attempts to interact with a tempting button or other function on my application, and they are not yet logged in, I wish to programmatically launch a modal dialogue to then ask them to log in.
Once successfully, I'll need to programmatically close the same dialogue modal. Or, of course, they can choose to cancel and continue browsing as a public user without the ability to do those functions.
Other Helpful Information: I'm using bootstrap 4.4.1
You can use a watch property. If a user is not logged in as login=false then the modal shows.
// register modal component
Vue.component("modal", {
template: "#modal-template"
});
// start app
new Vue({
el: "#app",
data: {
showModal: false,
login: null
},
created() {
this.login = false;
},
watch: {
"login": function(val) {
this.showModal = !val;
}
}
});
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: table;
transition: opacity 0.3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Modal Component</title>
<link rel="stylesheet" type="text/css" href="/style.css" />
<!-- template for the modal component -->
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
</head>
<body>
<!-- app -->
<div id="app">
<!-- use the modal component, pass in the prop -->
<modal v-if="showModal" #close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">custom header</h3>
</modal>
</div>
</body>
</html>
I was able to construct this using a project with a (relatively) recent example. Here is the component, as well as a 'Tester.vue' view that uses that component:
LoginModal.vue:
<template>
<transition name="modal-fade">
<div class="modal-backdrop">
<div
class="modal"
role="dialog"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
>
<header class="modal-header" id="modalTitle">
<slot name="header">
</slot>
</header>
<section class="modal-body" id="modalDescription">
<slot name="body">
Your Login Form Goes Here
<button type="button" v-on:click="validateLoginForm">
Log In
</button>
<button type="button" #click="close" aria-label="Close modal">
Cancel
</button>
</slot>
</section>
<footer class="modal-footer">
<slot name="footer"> </slot>
</footer>
</div>
</div>
</transition>
</template>
<script>
export default {
name: "loginModal",
data() {
return {
loginValidationAlerts: [],
};
},
methods: {
close() {
this.$emit("close");
},
validateLoginForm() {
//Login Form Validations go here
},
clearAllLoginValidationErrors() {
this.loginValidationAlerts = [];
},
attemptLogin() {
// Your login code
},
},
};
</script>
<style>
.modal-fade-enter,
.modal-fade-leave-active {
opacity: 0;
}
.modal-fade-enter-active,
.modal-fade-leave-active {
transition: opacity 0.5s ease;
}
.modal-backdrop {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
.modal {
background: #ffffff;
box-shadow: 2px 2px 20px 1px;
overflow-x: auto;
display: flex;
flex-direction: column;
}
.modal-header,
.modal-footer {
padding: 15px;
display: flex;
}
.modal-header {
border-bottom: 1px solid #eeeeee;
color: #4aae9b;
justify-content: space-between;
}
.modal-footer {
border-top: 1px solid #eeeeee;
justify-content: flex-end;
}
.modal-body {
position: relative;
padding: 20px 10px;
}
.btn-close {
border: none;
font-size: 20px;
padding: 20px;
cursor: pointer;
font-weight: bold;
color: #4aae9b;
background: transparent;
}
.btn-green {
color: white;
background: #4aae9b;
border: 1px solid #4aae9b;
border-radius: 2px;
}
</style>
Tester.vue:
<template>
<div>
Test Page
<div>
<button type="button" class="btn" #click="showModal">
Open Modal!
</button>
</div>
<div>
<LoginModal v-show="isModalVisible" #close="closeModal"></LoginModal>
</div>
</div>
</template>
<script>
import LoginModal from "#/components/LoginModal.vue";
export default {
components: {
// eslint-disable-next-line vue/no-unused-components
LoginModal,
},
data() {
return {
isModalVisible: false,
};
},
methods: {
showModal() {
// Do something here to determine
// if you should show modal
this.isModalVisible = true;
},
closeModal() {
// this will catch the close event
// after you're done processing the login in the component
this.isModalVisible = false;
},
},
};
</script>
<style scoped></style>
The appearance of the view and its component is pretty rough and without much formatting, but you get the picture.
Hopefully this helps somebody else if they're looking for a straight-forward modal in Vue; I believe it has to be a very common design requirement, and this approach worked for me.
The simple solution is:
add a reference to modal component
<share-modal ref="share-modal-ref"/>
import Modal like this:
import { Modal } from 'bootstrap'
then in your method do this:
let element = this.$refs.listModal.$el
let shareModal = new Modal(element, {})
shareModal.show()
It works on Vue 3 & Boostrap 5
Related
Being new to Vue, came across the following use-case. I have an accordion component that is reused across the application. The accordion simply hides and reveals anything wrapped inside it.
How can I enable closing any other open instance when I open an instance? e.g if prototype accordion is open, then functions and objects accordion is clicked, prototype accordion should close.
const vue = Vue.createApp({});
vue.component('accordion', {
data() {
return {
open: false,
}
},
methods: {
toggle() {
this.open = !this.open;
},
},
template: `
<div class="accord">
<p #click="toggle" class="accord-header">Click me to open and close!</p>
<div v-if="open" class="accord-body">
<slot></slot>
</div>
</div>
`,
})
vue.mount('#main-app');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#main-app {
width: 50%;
margin: 0 auto;
}
.accord {
padding: 4px;
cursor: pointer;
}
.accord-header {
text-align: center;
padding: 4px 0;
}
.accord-body {
background-color: #eee;
padding: 8px;
}
<script src="https://unpkg.com/vue#next"></script>
<div id="main-app">
<accordion>
<p class="accord-text">Javascript Proptotypes and inheritance</p>
</accordion>
<accordion>
<p class="accord-text">Scopes and Closures</p>
</accordion>
<accordion>
<p class="accord-text">Functions and Objects</p>
</accordion>
</div>
You can change open to be a prop, then you can do something like activeAccordianId: 1 in the parent and have the prop be
<accordian :open="activeAccordianId === 1" />
<accordian :open="activeAccordianId === 2" />
...
Trying to implement the overlay fullscreen menu with Vue.js, html/css/js is [this solution]https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay2
But stuck with how to toggle div height from 0% to 100%. I did create 2 classes,
'navbar'
'navbar_open'
but I am not sure how to toggle between them in Vue. I could see that once #click triggered, the class="navbar navbar_open"
<div id="myNav" class="navbar navbar_open">
<div class="closebtn">
<i class="fa fa-times"></i>
</div>
<div class="navbar-content">
<a>Home</a><a>Contact</a>
</div>
</div>
below is the App.vue file,
<template>
<div id="app">
<!-- Banner/Header -->
<!-- Hamburger -->
<div id="myNav" class="navbar" :class="{ navbar_open: showNavbar }">
<div class="closebtn" v-on:click="showNavbar = !showNavbar">
<i class="fa fa-times"></i>
</div>
<div class="navbar-content">
<a>Home</a>
<a>Contact</a>
</div>
</div>
<div class="openbtn">
<i class="fa fa-bars" v-on:click="showNavbar = !showNavbar"></i>
</div>
<router-view />
</div>
</template>
<script>
export default {
data() {
return {
showNavbar: false
};
},
methods: {
toggleNavbar() {
this.showNavbar = !showNavbar;
},
setHeightValue(showNavbar) {
const heightValue = this.showNavbar ? '100%' : '0%';
return heightValue;
}
},
created() {
this.setHeightValue();
}
};
</script>
<style>
#import url('https://use.fontawesome.com/releases/v5.9.0/css/all.css');
.navbar_open {
width: 100%;
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-y: hidden;
transition: 0.5s;
background-color: #2b4c72;
}
.navbar {
width: 100%;
height: 0%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-y: hidden;
transition: 0.5s;
background-color: #2b4c72;
}
.navbar-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.navbar a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.navbar a:hover,
.navbar a:focus {
color: #f1f1f1;
}
.navbar .closebtn {
position: absolute;
top: 20px;
left: 45px;
font-size: 60px;
color: white;
cursor: pointer;
}
.openbtn {
font-size: 30px;
}
#media screen and (max-height: 450px) {
.navbar {
overflow-y: auto;
}
.navbar a {
font-size: 20px;
}
.navbar .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
I see that you have unused method toggleNavbar. You call setHeightValue only when your component is created and then never again (I think you can remove this method). This menu is not 100% height probably because you embedded this component in another container (<div id="app:...) which has smaller height so height: 100% will be 100% height of parent container. Instead of 100% you can use 100vh (vh - is a viewport unit and it will always take 100% viewport height [if 50vh then 50% of total viewport height]). You should also apply only navbar_open but now you are applying bot classes if your navbar is open: navabar navbar_open so you should add this classes conditionally:
:class="{ 'navbar_open': showNavbar, 'navbar': !showNavbar }"
You have also Two different buttons responsible for two different actions:
closebtn -> close navigation
openbtn -> open navigation
So you should create two different methods openNavigation closeNavigation
<div id="app">
<!-- Banner/Header -->
<!-- Hamburger -->
<div id="myNav" :class="{ 'navbar_open': showNavbar, 'navbar': !showNavbar }">
<div class="closebtn" #click="closeNavigation">
<i class="fa fa-times"></i>
</div>
<div class="navbar-content">
<a>Home</a>
<a>Contact</a>
</div>
</div>
<div class="openbtn">
<i class="fa fa-bars" #click="showNavigation"></i>
</div>
<router-view />
</div>
</template>
<script>
export default {
data() {
return {
showNavbar: false
};
},
methods: {
openNavigation() {
this.showNavbar = true;
},
closeNaviagation() {
this.showNavbar = false;
}
}
};
</script>
<style>
...
.navbar_open {
width: 100%;
height: 100vh; // <--- 100vh instead of 100%
position: fixed;
...
</style>
I have read vue transitions documentation and is pretty clear how to apply them to the desired elements. But how to make height variations smooth to the parent container (grey) when a new child (green) is added/removed to a flex column? I have tried to animate max-height of the new child from 0, but isn't working. Here is my case:
fiddle: link
code:
HTML
<html>
<body>
<div id="app" class="demo">
<div>
<button v-on:click="on=!on">
toggle
</button>
</div>
<div class="background">
<div class="container">
<transition name="fade-outin" mode="out-in">
<red v-if="on"></red>
<blue v-else></blue>
</transition>
<transition name="fade-down">
<div v-if="!on">
<div style="height: 25px"></div>
<green></green>
</div>
</transition>
</div>
</div>
</div>
</body>
</html>
JS
var red = {
template: "<div style='width:150px; height:150px; border:10px solid red;'></div>"
};
var blue = {
template: "<div style='width:150px; height:150px; border:10px solid blue;'></div>"
};
var green = {
template: "<div style='width:150px; height:150px; border:10px solid green;'></div>"
};
var app = new Vue({
el: '#app',
data: {
on: true
},
components: {
red,
blue,
green
}
})
CSS
body {
padding: 20px;
}
.background {
border: 1px solid #000;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 500px;
overflow: hidden;
}
.container {
background-color: #abc;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
}
.fade-outin-enter-active, .fade-outin-leave-active {
transition: opacity 0.5s ease-in-out;
}
.fade-outin-enter, .fade-outin-leave-to {
opacity: 0;
}
.fade-down-enter-active {
transition: all 0.5s ease-in-out 0.5s;
}
.fade-down-leave-active {
transition: all 0.5s ease-in-out;
}
.fade-down-enter, .fade-down-leave-to {
max-height: 0;
opacity: 0;
transform: translateY(-65px);
}
Thanks for your time,
H25E
You can't use transition with height: auto, the CSS need a value to apply the transitions.
In this case, you must to use the max-height for animate your component. See this article for more details: https://dev.to/sarah_chima/using-css-transitions-on-the-height-property-al0
I do some changes in your code. Try something like this, but you can improve:
<html>
<body>
<div id="app" class="demo">
<div>
<button v-on:click="toggle">
toggle
</button>
</div>
<div class="background">
<div class="container" ref="container">
<transition name="fade-outin" mode="out-in">
<red v-if="on"></red>
<blue v-else></blue>
</transition>
<transition name="fade-down">
<div v-if="!on">
<div style="height: 25px"></div>
<green></green>
</div>
</transition>
</div>
</div>
</div>
</body>
</html>
var red = {
template: "<div style='width:150px; height:150px; border:10px solid red;'></div>"
};
var blue = {
template: "<div style='width:150px; height:150px; border:10px solid blue;'></div>"
};
var green = {
template: "<div style='width:150px; height:150px; border:10px solid green;'></div>"
};
var app = new Vue({
el: '#app',
data: {
on: true
},
components: {
red,
blue,
green
},
methods: {
toggle() {
if (this.on) {
this.$refs.container.style['max-height'] = '500px';
} else {
this.$refs.container.style['max-height'] = '170px';
}
this.on = !this.on;
}
}
})
.container {
background-color: #abc;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
max-height: 170px;
transition: max-height 3s;
}
Currently i have been using this code in the inline CDN version of VueJS and it works fine, but when i add this to gridsome the click event on the animation to open the slide out doesn't work.
I have looked up that animations for page enter is working but i am not sure how to handle component animations.
Are animations working in Gridsome?
<template>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<div class="row">
<div class="col">
<button
#click="show = !show"
class="navbar-toggler"
type="button"
>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="col">
<a class="navbar-brand" href="/">Navbar</a>
</div>
</div>
<div>
<transition name="slidein">
<div v-if="show" class="nav-bar">
<button
#click="show = !show"
class="btn-close pl-4 p-3"
type="button"
></button>
<span class="close-btn">X</span>
<div class="d-flex flex-column"></div>
</div>
</transition>
<transition name="fadein">
<div v-if="show = show" class="bck-close" #click="show = !show"></div>
</transition>
</div>
</nav>
</template>
<script>
export default {
name: "headNav",
data: {
show: false
},
};
</script>
<style>
.nav-bar {
height: 100vh;
width: 80vw;
background: #fff;
position: absolute;
left: 0;
z-index: 10000;
overflow-x: hidden;
overflow-y: auto;
top: 0;
}
.btn-close {
background: none;
border: none;
font-size: 1em;
}
.bck-close {
height: 100vh;
width: 100vw;
background: rgba(0, 0, 0, 1);
position: fixed;
z-index: 9999;
left: 0;
top: 0;
opacity: 0.1;
cursor: pointer;
}
.slidein-enter-active {
animation: slidein 0.2s;
}
.slidein-leave-active {
animation: slidein 0.2s reverse;
}
#keyframes slidein {
from {
left: -100%;
width: 0%;
}
to {
left: 0;
width: 80vw;
}
}
.fadein-enter-active {
animation: fadein 0.2s;
}
.fadein-leave-active {
animation: fadein 0.2s reverse;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.1;
}
}
</style>
Got the data part wrong, animations do work!
<script>
export default {
name: "headNav",
data () {
return {
show: false
}
},
};
</script>
I have created a simple reusable modal component using Vue.js and it works fine, but I want to make so that when I click on the backdrop the modal closes, how can I achieve this? I searched and found a similar question on stackoverflow:
vuejs hide modal when click off of it
And did the same that the accepted answer does, putting #click="$emit('close')" on the wrapper but the modal does not get closed by clicking the backdrop as it is in the provided example. Here is my code:
<template>
<div :class="backdrop" v-show="!showModal">
<div class="modal-wrapper">
<div class="modal-container" :class="size" #click="$emit('close')">
<span class="close-x" #click="closeModal">X</span>
<h1 class="label">{{label}}</h1>
<div class="modal-body">
<slot></slot>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'custom-modal',
data() {
return {
showModal: false
};
},
props: {
label: String | Number,
size: String,
backdrop: String
},
components: {
'custom-btn': customBtn
},
methods: {
closeModal() {
this.showModal = true;
}
}
};
</script>
<style>
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
margin: 0px auto;
padding: 20px 30px;
border-radius: 2px;
background-color: #fff;
font-family: Helvetica, Arial, sans-serif;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
}
.close-x {
color: #00A6CE;
float: right;
}
.close-x:hover {
cursor: pointer;
}
</style>
Without a library you need to set it up like this:
<div class="modal-wrapper" #click="$emit('close')>
<div class="modal-container" :class="size" #click.stop=""></div>
</div>
It looks like you're missing the #click.stop="" which is required. Additionally you want to move the $emit('close') up to the modal-wrapper level.
With a library it may be overkill, but this is something that I have used v-click-outside for.
Vue directive to react on clicks outside an element without stopping the event propagation. Great for closing dialogues, menus among other things.
Simply npm install --save v-click-outside
Then (from the docs):
<div v-click-outside="onClickOutside"></div>
and:
onClickOutside (event, el) {
this.closeModal();
},
Try creating a transparent div that covers all the screen but with a z-index < your modals z-index. Then #click on it, you emit your event to close the modal :) Hope it will hellp
<template>
<div #click="handleBackdropClick" class="backdrop" ref="backdrop">
<div class="modal">
<h1> Modal Title </h1>
<input type="text" />
<p> Modal Content </p>
</div>
</div>
</template>
<style>
.modal {
width: 400px;
padding: 20px;
margin: 100px auto;
background: white;
border-radius: 10px;
}
.backdrop{
top: 0;
position: fixed;
background: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
}
.close{
display: none;
}
</style>
export default {
methods: {
handleBackdropClick(e){
console.log(e)
if (e.path[0].className == "backdrop") {
this.$refs.backdrop.classList.add('close');
}
}
}
}
</script>