浏览代码

Basic structure and css for modal

sbkwgh 8 年之前
父节点
当前提交
7d8d4471a3
共有 1 个文件被更改,包括 23 次插入2 次删除
  1. 23 2
      src/components/ModalWindow.vue

+ 23 - 2
src/components/ModalWindow.vue

@@ -1,5 +1,14 @@
 <template>
-	<div class='modal_window'>
+	<div class='modal_window__overlay'>
+		<div class='modal_window'>
+			Placeholder content<br/>
+			Placeholder content<br/>
+			Placeholder content<br/>
+			Placeholder content<br/>
+			Placeholder content<br/>
+			Placeholder content<br/>
+			Placeholder content<br/>
+		</div>
 	</div>
 </template>
 
@@ -16,7 +25,19 @@
 </script>
 
 <style lang='scss' scoped>
+	.modal_window__overlay {
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
 	.modal_window {
-
+		width: 20rem;
+		background-color: #fff;
 	}
 </style>