Skip to content
Permalink
Browse files

Modal Episode Complete

  • Loading branch information...
JeffreyWay committed Jun 3, 2019
1 parent 783a5c1 commit 365ad8074cc1d2a9ddae7a49087c5d3bc9e7fb80
Showing with 150 additions and 2 deletions.
  1. +1 −1 package.json
  2. +67 −0 resources/js/plugins/modal/Component.vue
  3. +19 −0 resources/js/plugins/modal/ModalPlugin.js
  4. +61 −0 resources/views/modal.php
  5. +2 −1 routes/web.php
@@ -20,7 +20,7 @@
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
@@ -0,0 +1,67 @@
<template>
<div :id="name" class="overlay text-left">
<a href="#" class="cancel"></a>

<div class="modal">
<slot></slot>

<footer class="flex mt-8">
<slot name="footer"></slot>
</footer>

<a href="#" class="close">&times;</a>
</div>
</div>
</template>

<script>
export default {
props: ['name']
}
</script>

<style>
.overlay {
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .4);
transition: opacity .3s;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.modal {
position: relative;
width: 500px;
max-width: 80%;
background: white;
border-radius: 4px;
padding: 2.5em;
box-shadow: 0 5px 11px rgba(36, 37, 38, 0.08);
}
.modal .close {
position: absolute;
top: 15px;
right: 15px;
color: grey;
text-decoration: none;
}
.overlay .cancel {
position: absolute;
width: 100%;
height: 100%;
}
</style>
@@ -0,0 +1,19 @@
import Component from './Component';

let Plugin = {
install: function (Vue, options = {}) {
Vue.component('modal', Component);

Vue.prototype.$modal = {
show(name) {
location.hash = name;
},

hide(name) {
location.hash = '#';
}
}
}
};

export default Plugin;
@@ -0,0 +1,61 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Modal</title>
<style> body { font-family: sans-serif; } </style>
</head>
<body class="p-10">
<div id="app" class="text-center">
<h1 class="text-2xl font-bold mb-8">Modal</h1>
<p>
<a href="#cancel-modal" class="text-blue-500 underline">Open Modal</a>
</p>
<modal name="cancel-modal">
<h1 class="font-bold text-xl mb-2">Leaving So Soon?</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore.
</p>
<template v-slot:footer>
<button
@click="$modal.hide('cancel-modal')"
class="bg-gray-500 py-2 px-4 rounded-lg text-white hover:bg-gray-600 mr-2"
>Cancel</button>
<a
href="#confirm-cancel-modal"
class="bg-blue-500 py-2 px-4 rounded-lg text-white hover:bg-blue-600"
>Confirm Cancellation</a>
</template>
</modal>
<modal name="confirm-cancel-modal">
<h1 class="font-bold text-xl mb-2">You're 100% Sure?</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore.
</p>
<template v-slot:footer>
<a href="#" class="bg-gray-500 py-2 px-4 rounded-lg text-white hover:bg-gray-600 mr-2">Cancel</a>
<a href="#" class="bg-blue-500 py-2 px-4 rounded-lg text-white hover:bg-blue-600">Yes</a>
</template>
</modal>
</div>
<script src="/js/app.js"></script>
</body>
</html>
@@ -14,7 +14,8 @@
$examples = [
'smooth-scroll',
'context-menu',
'conditional-visibility'
'conditional-visibility',
'modal'
];

0 comments on commit 365ad80

Please sign in to comment.
You can’t perform that action at this time.