TahaSh · May 27, 2017 20:24 · jesseschutt · Mar 16, 2016 · rob1121 · Jul 12, 2016
diff --git a/helpers.php b/helpers.php
 <?php

 function showModal($id, array $data = [])
 {
    $toJSON = json_encode($data);
    return "showModal('$id', $toJSON)";
 }
diff --git a/main.js b/main.js
 Vue.transition('fade', {
    enterClass: 'fadeIn',
    leaveClass: 'fadeOut'
 });

 Vue.transition('fadeWithMove', {
    enterClass: 'fadeInDown',
    leaveClass: 'fadeOutUp'
 });

 Vue.component('modal-box', {
    template: '#modal-box-template',

    props: ['id', 'title'],

    created: function() {
        this.closeModal();
    },

    computed: {
        isModalOpen: function() {
            return this.$root[this.id + 'IsOpen'];
        }
    },

    methods: {
        closeModal: function() {
            this.$root.$set(this.id + 'IsOpen', false);
        }
    }
 });

 new Vue({
    el: '#app',

    data: {
        modalData: {}
    },

    methods: {
        showModal: function(id, data) {
            this.$set(id + 'IsOpen', true);
            this.modalData = data;
        }
    }
 });
diff --git a/style.css b/style.css
 html, body {
    height: 100%;
 }

 body {
    margin: 0;
    padding: 0;
    width: 100%;
    display: table;
    font-weight: 100;
    font-family: 'Lato';
 }

 .container {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
 }

 .content {
    text-align: center;
    display: inline-block;
 }

 .title {
    font-size: 96px;
 }

 .Modal__container {
    max-width: 700px;
    width: 90%;
    background: white;
    border-radius: 2px;
    animation-duration: 0.3s;
    animation-delay: 0s;
 }

 .Modal__header {
    border-bottom: 1px solid white;
    padding: 15px 10px;
    background-color: silver;
    color: white;
    border-radius: 2px;
 }

 .Modal__header > h1 {
    font-size: 27px;
    font-weight: normal;
    margin: 0;
 }

 .Modal__content {
    padding: 10px;
 }

 .Modal__footer {
    padding: 5px;
 }

 .u-overlay {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
 }

 .naked-link {
    color: inherit;
    text-decoration: inherit;
 }

 /** Control the animation speed **/
 .animated {
    animation-duration: 0.4s;
    -webkit-animation-duration: 0.4s;
    -moz-animation-duration: 0.4s;
 }
diff --git a/welcome.blade.php b/welcome.blade.php
 <!DOCTYPE html>
 <html>
    <head>
        <title>Modal Boxes</title>

        <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
        <link rel="stylesheet" href="/css/style.css">
    </head>
    <body id="app">
        <div class="container">
            <div class="content">
                <a href="#" @click="{{ showModal('firstModal', ['foo' => 'FOO VALUE', 'bar' => 'BAR VALUE']) }}" class="naked-link title">First Modal</a><br>
                <a href="#" @click="{{ showModal('secondModal') }}" class="naked-link title">Second Modal</a>
            </div>
        </div>

        <template id="modal-box-template">
            <div @click="closeModal" v-show="isModalOpen" transition="fade" class="Modal u-overlay animated">
                <div @click.stop="" v-show="isModalOpen" transition="fadeWithMove" class="Modal__container animated">
                    <header class="Modal__header">
                        <h1>
                            @{{ title }}
                        </h1>
                    </header>

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

                    <footer class="Modal__footer"></footer>
                </div>
            </div>
        </template>

        <modal-box id="firstModal" title="First Modal">
            <p>Here is the body. @{{ modalData.foo }} and @{{ modalData.bar }}</p>
        </modal-box>

        <modal-box id="secondModal" title="Second Modal">
            <p>The body of the second modal.</p>
        </modal-box>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.14/vue.min.js"></script>
        <script src="/js/main.js"></script>
    </body>
 </html>
	<?php

	function showModal($id, array $data = [])
	{
	$toJSON = json_encode($data);
	return "showModal('$id', $toJSON)";
	}
	Vue.transition('fade', {
	enterClass: 'fadeIn',
	leaveClass: 'fadeOut'
	});

	Vue.transition('fadeWithMove', {
	enterClass: 'fadeInDown',
	leaveClass: 'fadeOutUp'
	});

	Vue.component('modal-box', {
	template: '#modal-box-template',

	props: ['id', 'title'],

	created: function() {
	this.closeModal();
	},

	computed: {
	isModalOpen: function() {
	return this.$root[this.id + 'IsOpen'];
	}
	},

	methods: {
	closeModal: function() {
	this.$root.$set(this.id + 'IsOpen', false);
	}
	}
	});

	new Vue({
	el: '#app',

	data: {
	modalData: {}
	},

	methods: {
	showModal: function(id, data) {
	this.$set(id + 'IsOpen', true);
	this.modalData = data;
	}
	}
	});
	html, body {
	height: 100%;
	}

	body {
	margin: 0;
	padding: 0;
	width: 100%;
	display: table;
	font-weight: 100;
	font-family: 'Lato';
	}

	.container {
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	}

	.content {
	text-align: center;
	display: inline-block;
	}

	.title {
	font-size: 96px;
	}

	.Modal__container {
	max-width: 700px;
	width: 90%;
	background: white;
	border-radius: 2px;
	animation-duration: 0.3s;
	animation-delay: 0s;
	}

	.Modal__header {
	border-bottom: 1px solid white;
	padding: 15px 10px;
	background-color: silver;
	color: white;
	border-radius: 2px;
	}

	.Modal__header > h1 {
	font-size: 27px;
	font-weight: normal;
	margin: 0;
	}

	.Modal__content {
	padding: 10px;
	}

	.Modal__footer {
	padding: 5px;
	}

	.u-overlay {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.naked-link {
	color: inherit;
	text-decoration: inherit;
	}

	/ Control the animation speed /
	.animated {
	animation-duration: 0.4s;
	-webkit-animation-duration: 0.4s;
	-moz-animation-duration: 0.4s;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Modal Boxes</title>

	<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
	<link rel="stylesheet" href="/css/style.css">
	</head>
	<body id="app">
	<div class="container">
	<div class="content">
	<a href="#" @click="{{ showModal('firstModal', ['foo' => 'FOO VALUE', 'bar' => 'BAR VALUE']) }}" class="naked-link title">First Modal</a><br>
	<a href="#" @click="{{ showModal('secondModal') }}" class="naked-link title">Second Modal</a>
	</div>
	</div>

	<template id="modal-box-template">
	<div @click="closeModal" v-show="isModalOpen" transition="fade" class="Modal u-overlay animated">
	<div @click.stop="" v-show="isModalOpen" transition="fadeWithMove" class="Modal__container animated">
	<header class="Modal__header">
	<h1>
	@{{ title }}
	</h1>
	</header>

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

	<footer class="Modal__footer"></footer>
	</div>
	</div>
	</template>

	<modal-box id="firstModal" title="First Modal">
	<p>Here is the body. @{{ modalData.foo }} and @{{ modalData.bar }}</p>
	</modal-box>

	<modal-box id="secondModal" title="Second Modal">
	<p>The body of the second modal.</p>
	</modal-box>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.14/vue.min.js"></script>
	<script src="/js/main.js"></script>
	</body>
	</html>