Raw captive portal detected popup

css/popups.css

@@ -8,7 +8,8 @@
   height: 100%;
   display:none;
 }
-#settings {
+
+.popup {
 	background-color: #fff;
 	z-index: 15;
   
@@ -30,23 +31,23 @@
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   overflow: hidden; 
+  display:none;
 }
+
+
 #settings header {
 	margin: 25px 25px 0 25px;
   height: 44px;
 }
-
+#settings div.content {
-div.content {
   margin: 15px 25px 25px 25px;
   height: 388px;
   display: table;
 }
-
+#settings div.content > div {
-div.content > div {
   height: 100%;
 }
-
+#settings div.content > div.settings {
-div.content > div.settings {
   border: 1px solid rgb(187, 187, 187);
   -webkit-border-radius: 5px;
 	-moz-border-radius: 5px;
@@ -58,17 +59,26 @@ div.content > div.settings {
   overflow-x: hidden;
   padding: 10px 10px 10px 10px;
 }
-div.content > div.manipulationBtns {
+#settings div.content > div.manipulationBtns {
   display: table-cell;
   vertical-align: bottom;
   width: 125px;
   
 }
-
+#settings div.content .btnOK {
-div.content .btnOK {
   width: 85px;
   height: 86px;
   background: url('../img/buttons/btnOk_settings.png') no-repeat;
   margin: 0 0 0 10px;
   cursor: pointer;
 }
+
+
+#portalpopup {
+	width: 400px;
+	height: 200px;
+	margin: -100px 0 0 -200px;
+}
+#portalpopup p{
+	margin: 1em;
+}

index.html

@@ -13,7 +13,7 @@
   <link href="css/normalize.css" rel="stylesheet" media="screen">
   <link href="css/fixedPosInterface.css" rel="stylesheet" media="screen">
   <link href="css/d3d_btns.css" rel="stylesheet" media="screen">
-  <link href="css/settingsPopup.css" rel="stylesheet" media="screen">
+  <link href="css/popups.css" rel="stylesheet">
   <link href="css/debug.css" rel="stylesheet" media="screen">
   
 </head>
@@ -79,7 +79,7 @@
     <textarea rows="5" cols="115" id="textdump"></textarea>
   </div>
   <div id="contentOverlay">
-    <div id="settings">
+    <div id="settings" class="popup">
       <header>
         <img src="img/settings_lable.png" alt="settings"/>
       </header>
@@ -90,6 +90,9 @@
         </div>
       </div>
     </div>
+    <div id="portalpopup" class="popup">
+  		<p>Hi, <a href="http://draw.doodle3d.com">start doodling!</a></p>
+	</div>
   </div>
 </div>
 <div id="portrait">

js/SettingsWindow.js

@@ -109,7 +109,7 @@ function SettingsWindow() {
 	  console.log("f:showSettings()");
 
 	  this.loadSettings(); // reload settings
-
+		this.window.css("display","block");
 	  $("#contentOverlay").fadeIn(375, function() {
 	    document.body.removeEventListener('touchmove',prevent,false);
 	  });
@@ -117,6 +117,7 @@ function SettingsWindow() {
 	this.hideSettings = function() {
 		$("#contentOverlay").fadeOut(375, function() {
       document.body.addEventListener('touchmove',prevent,false);
+      self.window.css("display","none");
     });
 	}
 

js/main.js

@@ -49,6 +49,10 @@ $(function() {
 	settingsWindow.init(wifiboxURL);
 	$(document).on(SettingsWindow.SETTINGS_LOADED,settingsLoaded);
 	
+	if(window.toolbar.visible == false) {
+		$("#contentOverlay").css("display","block");
+		$("#portalpopup").css("display","block");
+	}
   if(debugMode) {
     console.log("debug mode is true");
     $("body").css("overflow", "auto");