--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Popup.vue	Mon Feb 25 13:11:30 2019 +0100
@@ -0,0 +1,137 @@
+<template>
+  <transition name="fade">
+    <div
+      class="overlay d-flex justify-content-center align-items-center"
+      v-if="popup"
+    >
+      <div class="popup">
+        <h6 class="popup-header">
+          <span class="popup-title">
+            <font-awesome-icon :icon="popup.icon" class="popup-icon" />
+            {{ popup.title }}
+          </span>
+          <span class="popup-close" @click="close()">
+            <font-awesome-icon icon="times" />
+          </span>
+        </h6>
+        <div class="popup-content" v-html="popup.content"></div>
+        <div class="popup-footer" v-if="popup.cancel || popup.confirm">
+          <button
+            class="btn btn-sm btn-warning"
+            @click="cancel"
+            v-if="popup.cancel"
+          >
+            <font-awesome-icon
+              :icon="popup.cancel.icon"
+              class="fa-fw"
+              v-if="popup.cancel.icon"
+            />
+            {{ popup.cancel.label || $gettext("Cancel") }}
+          </button>
+          <span />
+          <button
+            class="btn btn-sm btn-info"
+            @click="confirm"
+            v-if="popup.confirm"
+          >
+            <font-awesome-icon
+              :icon="popup.confirm.icon"
+              class="fa-fw"
+              v-if="popup.confirm.icon"
+            />
+            {{ popup.confirm.label || $gettext("Confirm") }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style lang="sass" scoped>
+.overlay
+  position: fixed
+  z-index: 9
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  background: rgba(0, 0, 0, .3)
+  .popup
+    display: flex
+    flex-direction: column
+    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)
+    background-color: #fff
+    border-radius: 0.25rem
+    max-width: 320px
+    .popup-header
+      display: flex
+      justify-content: space-between
+      align-items: center
+      padding-left: .5rem
+      border-bottom: 1px solid #dee2e6
+      color: $color-info
+      margin-bottom: 0
+      padding: 0.25rem
+      font-weight: bold
+      .popup-title
+        padding-left: 0.25rem
+        .popup-icon
+          margin-right: 0.25rem
+      .popup-close
+        color: #aaa
+        padding: 3px 5px
+        border-radius: 0.25rem
+        cursor: pointer
+        transition: background-color 0.3s, color 0.3s
+        &:hover
+          color: #888
+          background-color: #eee
+    .popup-content
+      padding: 1rem
+    .popup-footer
+      display: flex
+      justify-content: space-between
+      align-items: center
+      border-top: 1px solid #dee2e6
+      padding: 0.25rem
+</style>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+
+import { mapState } from "vuex";
+
+export default {
+  name: "popup",
+  computed: {
+    ...mapState("application", ["popup"])
+  },
+  methods: {
+    confirm() {
+      if (this.popup.confirm && this.popup.confirm.callback)
+        this.popup.confirm.callback();
+      this.close();
+    },
+    cancel() {
+      if (this.popup.cancel && this.popup.cancel.callback)
+        this.popup.cancel.callback();
+      this.close();
+    },
+    close() {
+      this.$store.commit("application/popup", null);
+    }
+  }
+};
+</script>