Basic structure for popups

assets/css/admin.css

@@ -60,6 +60,7 @@
 	color: var(--prpl-color-text);
 	font-size: var(--prpl-font-size-base);
 	line-height: 1.4
+	position: relative;
 }
 
 /*------------------------------------*\
@@ -483,15 +484,13 @@ button.prpl-info-icon {
 }
 
 /*------------------------------------*\
-	Popups.
+	Popups overlay.
 \*------------------------------------*/
-#prpl-popup-container,
 #prpl-popup-body-overlay {
 	display: none;
-	position: fixed;
-}
-
-#prpl-popup-body-overlay {
+	position: absolute;
+	margin-left: -20px;
+	padding-left: 20px;
 	top: 0;
 	left: 0;
 	width: 100%;
@@ -504,8 +503,36 @@ button.prpl-info-icon {
 	display: block;
 }
 
+/*------------------------------------*\
+	Popups generic styles.
+\*------------------------------------*/
+#prpl-popup-container {
+	display: none;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background: #fff;
+	border: 1px solid var(--prpl-color-gray-3);
+	border-radius: var(--prpl-border-radius);
+	padding: var(--prpl-padding);
+	z-index: 1001;
+	min-width: 300px;
+	min-height: 200px;
+}
+
 .prpl-popup-open #prpl-popup-container {
 	display: block;
 	z-index: 1001;
 }
-/* prpl-popup-badges-details */
+
+/*------------------------------------*\
+	Popups generic styles.
+\*------------------------------------*/
+#prpl-popup-badges-details {
+	display: none;
+}
+
+body.prpl-popup-open.prpl-popup-badges-details #prpl-popup-badges-details {
+	display: block;
+}

classes/popups/class-badges.php

@@ -0,0 +1,30 @@
+<?php
+/**
+ * Activity Scores Widget.
+ *
+ * @package ProgressPlanner
+ */
+
+namespace ProgressPlanner\Popups;
+
+/**
+ * Activity Scores Widget.
+ */
+final class Badges extends Popup {
+
+	/**
+	 * The popup ID.
+	 *
+	 * @var string
+	 */
+	protected $id = 'badges-details';
+
+	/**
+	 * Render the widget content.
+	 */
+	protected function the_content() {
+		?>
+		Test
+		<?php
+	}
+}

classes/popups/class-popup.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Activity Scores Widget.
+ *
+ * @package ProgressPlanner
+ */
+
+namespace ProgressPlanner\Popups;
+
+/**
+ * Activity Scores Widget.
+ */
+abstract class Popup {
+
+	/**
+	 * The popup ID.
+	 *
+	 * @var string
+	 */
+	protected $id;
+
+	/**
+	 * Constructor.
+	 */
+	public function __construct() {
+		$this->render();
+	}
+
+	/**
+	 * Render the widget content.
+	 */
+	public function render() {
+		?>
+		<div id="prpl-popup-<?php echo \esc_attr( $this->id ); ?>" class="prpl-popup">
+			<?php $this->the_content(); ?>
+		</div>
+		<?php
+	}
+
+	/**
+	 * Render the widget content.
+	 */
+	abstract protected function the_content();
+}

views/admin-page.php

@@ -42,6 +42,6 @@
 	</div>
 	<div id="prpl-popup-body-overlay"></div>
 	<div id="prpl-popup-container">
-		<div class="prpl-popup-body"></div>
+		<?php new \ProgressPlanner\Popups\Badges(); ?>
 	</div>
 </div>