JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://rawgit.com/janfoeh/veiljs/master/veil.js"></script>
<script src="https://rawgit.com/janfoeh/veiljs/master/veil-knockout.js"></script>
<script src="https://rawgit.com/janfoeh/veiljs/master/veil-jquery.js"></script>
<div>
<!-- ko if: answer -->
You <span data-bind="text: answer"></span> kittens.
<!-- /ko -->
<button data-bind="veil: $data, veilTemplate: 'dialog-template'">Open dialog</button>
</div>
<script id="dialog-template" type="text/html">
<img src="http://placekitten.com/g/400/200" />
<button data-bind="click: setAnswer.bind($data, 'like')">Like</button>
<button data-bind="click: setAnswer.bind($data, 'dislike')">Dislike</button>
</script>
SCSS
@-webkit-keyframes overlay {
0% {
-webkit-transform: translateY(-100%) scale(0.8);
box-shadow: 0px 40px 20px 5px #c2c2c2;
}
50% {
-webkit-transform: translateY(0%) scale(0.8);
box-shadow: 0px 0px 20px 5px #c2c2c2;
}
90% {
-webkit-transform: translateY(0%) scale(0.8);
box-shadow: 0px 0px 20px 5px #c2c2c2;
}
100% {
-webkit-transform: translateY(0%) scale(1);
box-shadow: 0px 0px 0px 0px #c2c2c2;
}
}
.veil-overlay {
position: fixed;
top: calc(50% - 12.5vh);
left: calc(50% - 25vw);
display: none;
z-index: 10;
&.fullscreen {
width: 50vw;
height: 25vh;
padding: 2rem;
}
&.activating, &.active, &.deactivating {
display: block;
visibility: visible;
}
&.active {
-webkit-animation: overlay 1s cubic-bezier(0.7, 0, 0.3, 1) 0s 1 normal forwards;
-moz-animation: overlay 1s cubic-bezier(0.7, 0, 0.3, 1) 0s 1 normal forwards;
animation: overlay 1s cubic-bezier(0.7, 0, 0.3, 1) 0s 1 normal forwards;
}
&.deactivating {
transform: scale(0);
}
}
.veil-overlay {
border: 1px solid black;
padding: 2rem;
text-align: center;
}
.veil-overlay img {
display: block;
}
JavaScript
var ViewModel,
vm;
ViewModel = function ViewModel() {
var that = this;
this.answer = ko.observable();
this.setAnswer = function setAnswer(answer) {
that.answer(answer);
};
};
vm = new ViewModel();
ko.applyBindings(vm);