Override alert box with a jquery-ui dialog box.

application/views/template.php

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
 		<link rel="stylesheet" type="text/css" media="all" href="/css/html5reset-1.6.1.css" />
 		<link rel="stylesheet" type="text/css" media="all" href="/css/style.css" />
+		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" type="text/css" />
 
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 
@@ -44,8 +45,15 @@
 						break;
 				}
 			});
+			$(function () {  
+			    $.altAlert({
+			    	resizable: false,
+			    });  
+			});  
 		</script>
-		<script src="js/jquery.filedrop.js"></script>
-		<script src="js/upload.js"></script>
+		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+		<script src="/js/jquery.altAlert.js"></script>
+		<script src="/js/jquery.filedrop.js"></script>
+		<script src="/js/upload.js"></script>
    </body>
 </html>

css/style.css

@@ -28,7 +28,9 @@ html {
 body {
 	color: #fff;
 	min-height: 600px;
-	font: 14px/1.3 'Segoe UI',Arial, sans-serif;
+	/*font: 14px/1.3 'Segoe UI',Arial, sans-serif;*/
+	font-family: 'Segoe UI', Arial, sans-serif;
+	font-size: 12px;
 }
 
 a, a:visited {
@@ -56,6 +58,7 @@ header {
 header{
 	background-color: #303030;
 	background-image: url(../img/dark_circles.png);
+	font-size: 16px;
 	/*position: fixed;*/
 	width: 100%;
 	height: 25px;

js/jquery.altAlert.js

@@ -0,0 +1,21 @@
+jQuery.altAlert = function (options)  
+{  
+    var defaults = {  
+        title: "Alert",  
+        buttons: {  
+            "Ok": function()  
+            {  
+                jQuery(this).dialog("close");  
+            }  
+        }  
+    };  
+  
+    jQuery.extend(defaults, options);  
+  
+    delete defaults.autoOpen;  
+  
+    window.alert = function ()  
+    {  
+        jQuery("<div />", { html: arguments[0].replace(/\n/, "<br />") }).dialog(defaults);  
+    };  
+};