diff --git a/main.css b/main.css
index a646bde..1b9152f 100644
--- a/main.css
+++ b/main.css
@@ -2388,4 +2388,48 @@ input:checked + .slider:before {
   -webkit-transform: translateX(16px);
   -ms-transform: translateX(16px);
   transform: translateX(16px);
+}
+
+.alertModal {
+	position: absolute;
+    background-color: rgb(221 221 221);
+    box-shadow: 0 0 30px 10px #0000005c;
+    color: black;
+    font-size: 1.2em;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 10px;
+    font-weight: bold;
+	z-index:1;
+}
+
+.alertModalInner {
+	position: relative;
+	padding: 2em;
+}
+
+.alertModalClose {
+    position: absolute;
+    top: -2px;
+    right: 4px;
+    cursor: pointer;
+    font-weight: bolder;
+}
+
+.alertModalBackdrop {
+	background: var(--background-color);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+	opacity: 0.8;
+}
+
+@media only screen and (max-width: 390px) {
+	.alertModal {
+		width: 90%;
+	}
 }
\ No newline at end of file
diff --git a/main.js b/main.js
index 35a1019..24071ce 100644
--- a/main.js
+++ b/main.js
@@ -216,7 +216,7 @@ var sanitizeStreamID = function(streamID) {
 	if (streamID_sanitized.length > 24) {
 		streamID_sanitized = streamID_sanitized.substring(0, 24);
 		if (!(session.cleanOutput)) {
-			alert("The Stream ID should be less than 25 alPhaNuMeric characters long.\n\nWe will trim it to length.");
+			warnUser("The Stream ID should be less than 25 alPhaNuMeric characters long.\n\nWe will trim it to length.");
 		}
 	}
 	return streamID_sanitized;
@@ -1972,7 +1972,7 @@ if (urlParams.has('secure')) {
 	session.security = true;
 	if (!(session.cleanOutput)) {
 		setTimeout(function() {
-			alert("Enhanced Security Mode Enabled.");
+			warnUser("Enhanced Security Mode Enabled.");
 		}, 100);
 	}
 }
@@ -5674,7 +5674,7 @@ function gotDevices(deviceInfos) { // https://github.com/webrtc/samples/blob/gh-
 
 if (location.protocol !== 'https:') {
 	if (!(session.cleanOutput)) {
-		alert("SSL (https) is not enabled. This site will not work without it!");
+		warnUser("SSL (https) is not enabled. This site will not work without it!");
 	}
 }
 
@@ -12074,13 +12074,54 @@ addEventToAll("#multiselect-trigger3", 'mousedown touchend focusin focusout', fu
 });
 
 // Warns user about network going down
-
 window.addEventListener("offline", function (e) {
   if (!session.cleanOutput) {
-    alert("OBS.Ninja has no network connectivity and can't work properly.");
+    warnUser("OBS.Ninja has no network connectivity and can't work properly.");
   } else {
-    console.log(
+    log(
       "OBS.Ninja has no network connectivity and can't work properly."
     );
   }
 });
+
+// Remove modal if network comes back up
+window.addEventListener("online", function (e) {
+	if (!session.cleanOutput) {
+		// Remove last inserted modal; Could be improved by tagging the
+		// modal elements and only removing modals tagged 'offline'
+		userWarnings = document.querySelectorAll('.alertModal');
+		closeModal(userWarnings[userWarnings.length- 1]);
+	} else {
+	  log(
+		"Network connectivity has been restored."
+	  );
+	}
+  });
+
+function warnUser(message){
+
+	// Allows for multiple alerts to stack better.
+	// Every modal and backdrop has an increasing z-index
+	// to block the previous modal
+	zindex = document.querySelectorAll('.alertModal').length;
+
+	modalTemplate =
+	`<div class="alertModal" onclick="closeModal(this)" style="z-index:${zindex + 2}">	
+		<div class="alertModalInner">
+			<span class='alertModalClose'>×</span>
+			<span class='alertModalMessage'>${message}</span>
+		</div>
+	</div>
+	<div class="alertModalBackdrop" style="z-index:${zindex + 1}"></div>`
+
+	// Insert modal at body end
+	document.body.insertAdjacentHTML("beforeend", modalTemplate);
+}
+
+function closeModal(element){
+	// Delete backdrop
+	element.nextElementSibling.outerHTML = ''
+
+	// Delete modal
+	element.outerHTML = ''
+}