4 files changed, 102 insertions, 3 deletions
diff --git a/src/main/scala/reading/component/widget/Cross.scala b/src/main/scala/reading/component/widget/Cross.scala
index cfbb29d..c9e3054 100644
--- a/src/main/scala/reading/component/widget/Cross.scala
+++ b/src/main/scala/reading/component/widget/Cross.scala
@@ -14,7 +14,9 @@ object Cross {
       CrossStyle.cross,
       width := size,
       height := size,
-      div(CrossStyle.line1, backgroundColor := color.value),
-      div(CrossStyle.line2, backgroundColor := color.value)
+      div(
+        div(CrossStyle.line1, backgroundColor := color.value),
+        div(CrossStyle.line2, backgroundColor := color.value)
+      )
     )
 }
diff --git a/src/main/scala/reading/component/widget/Popup.scala b/src/main/scala/reading/component/widget/Popup.scala
new file mode 100644
index 0000000..8e40d36
--- /dev/null
+++ b/src/main/scala/reading/component/widget/Popup.scala
@@ -0,0 +1,45 @@
+package reading.component.widget
+
+import org.scalajs.dom
+
+import rx._
+import Ctx.Owner.Unsafe._
+
+import scalatags.JsDom.all._
+import scalacss.Defaults._
+import scalacss.ScalatagsCss._
+
+import reading.component.widget.style.{ Popup => PopupStyle }
+import reading.component.style.Col
+import reading.utils.{ RxAttr }
+
+object Popup {
+  def apply(onClose: => Unit)(content: HtmlTag): HtmlTag = {
+    dom.document.body.style.overflowY = "hidden"
+
+    div(
+      PopupStyle.render,
+      PopupStyle.popup,
+
+      div(
+        PopupStyle.curtain,
+        RxAttr(onclick, Rx(() => close(onClose)))
+      ),
+
+      div(
+        PopupStyle.content,
+        content,
+        div(
+          PopupStyle.cross,
+          RxAttr(onclick, Rx(() => close(onClose))),
+          Cross(20.px, Col.stiletto)
+        )
+      )
+    )
+  }
+
+  private def close(onClose: => Unit): Unit = {
+    dom.document.body.style.overflowY = "scroll"
+    onClose
+  }
+}
diff --git a/src/main/scala/reading/component/widget/style/Cross.scala b/src/main/scala/reading/component/widget/style/Cross.scala
index 1d96958..485e1e9 100644
--- a/src/main/scala/reading/component/widget/style/Cross.scala
+++ b/src/main/scala/reading/component/widget/style/Cross.scala
@@ -6,7 +6,9 @@ object Cross extends StyleSheet.Inline {
   import dsl._
 
   val cross = style(
-    position.relative
+    position.relative,
+    width(100.%%),
+    height(100.%%)
   )
 
   val line1 = style(
diff --git a/src/main/scala/reading/component/widget/style/Popup.scala b/src/main/scala/reading/component/widget/style/Popup.scala
new file mode 100644
index 0000000..422e3bd
--- /dev/null
+++ b/src/main/scala/reading/component/widget/style/Popup.scala
@@ -0,0 +1,50 @@
+package reading.component.widget.style
+
+import scalacss.Defaults._
+
+import reading.component.style.Col
+
+object Popup extends StyleSheet.Inline {
+  import dsl._
+
+  val popup = style(
+    display.flex,
+    justifyContent.center,
+    alignItems.center,
+    position.fixed,
+    width(100.%%),
+    height(100.%%),
+    top(0.px),
+    right(0.px),
+    bottom(0.px),
+    left(0.px)
+  )
+
+  val curtain = style(
+    width(100.%%),
+    height(100.%%),
+    position.absolute,
+    top(0.px),
+    left(0.px),
+    backgroundColor(Col.black),
+    opacity(0.5),
+    cursor.pointer
+  )
+
+  val content = style(
+    position.relative,
+    width(50.%%),
+    backgroundColor(Col.white),
+    padding(30.px),
+    borderRadius(5.px)
+  )
+
+  val cross = style(
+    position.absolute,
+    top(30.px),
+    right(30.px),
+    width(20.px),
+    height(20.px),
+    cursor.pointer
+  )
+}