custom alert: now alert will be able to display custom HTML

stylesheets/caffe.css

@@ -382,7 +382,7 @@ font-size: 9pt;
 }
 
 /* options.js */
-#options_div {
+#options_div, #alert_div {
   background: #a47a6b url('img/caffe_reply.png') repeat center;
   border: solid 1px #a47a6b;
   -moz-border-radius: 5px;

stylesheets/dark.css

@@ -181,7 +181,7 @@ div.report {
 }
 
 /* options.js */
-#options_div {
+#options_div, #alert_div {
 	background: #333333;
 }
 .options_tab_icon {

stylesheets/dark_roach.css

@@ -471,7 +471,7 @@ input[type="submit"]:hover
 }
 
 /* options.js */
-#options_div {
+#options_div, #alert_div {
         background: #333333;
 }
 .options_tab_icon {

stylesheets/futaba+vichan.css

@@ -101,7 +101,7 @@ div.boardlist.bottom {
 }
 
 /* options.js */
-#options_div {
+#options_div, #alert_div {
   background: rgb(240, 224, 214);
 }
 .options_tab_icon {

stylesheets/futaba-light.css

@@ -98,7 +98,7 @@ table.modlog tr th {
 }
 
 /* options.js */
-#options_div {
+#options_div, #alert_div {
   background: rgb(240, 224, 214);
 }
 

stylesheets/futaba.css

@@ -86,7 +86,7 @@ table.modlog tr th {
 }
 
 /* options.js */
-#options_div {
+#options_div, #alert_div {
   background: rgb(240, 224, 214);
 }
 .options_tab_icon {

stylesheets/roach.css

@@ -256,7 +256,7 @@ border-top: 1px solid #835B36 !important;
 }
 
 /* options.js */ 
-#options_div { 
+#options_div, #alert_div { 
         background: white; 
 }
 

stylesheets/style.css

@@ -786,7 +786,7 @@ div.thread:hover {
   text-align: center;
 }
 
-#options_handler {
+#options_handler, #alert_handler {
   position: fixed;
   top: 0px;
   left: 0px;
@@ -798,7 +798,7 @@ div.thread:hover {
   z-index: 9900;
 }
 
-#options_background {
+#options_background, #alert_background {
   background: black;
   opacity: 0.5;
   position: absolute;
@@ -811,21 +811,38 @@ div.thread:hover {
   z-index: -1;
 }
 
-#options_div {
+#options_div, #alert_div {
   background-color: #d6daf0;
   border: 1px solid black;
   display: inline-block;
   position: relative;
   margin-top: 20px;
+}
+
+#options_div {
   width: 600px;
   height: 300px;
 }
 
+#alert_div {
+  width: 500px;
+}
+
+#alert_message {
+  text-align: center;
+  margin: 13px;
+  font-size: 110%;
+}
+
+.alert_button {
+  margin-bottom: 13px;
+}
+
 #options_div textarea {
   max-width: 100%;
 }
 
-#options_close {
+#options_close, #alert_close {
   top: 0px;
   right: 0px;
   position: absolute;
@@ -878,7 +895,7 @@ div.thread:hover {
   margin-bottom: 5px;
 }
 
-.mobile-style #options_div {
+.mobile-style #options_div, .mobile-style #alert_div {
   display: block;
   width: 100%;
   height: 100%;

stylesheets/yotsuba.css

@@ -59,7 +59,7 @@ table.modlog tr th {
 }
 
 /* options.js */
-#options_div {
+#options_div, #alert_div {
 	background: #f0e0d6;
 }
 

templates/main.js

@@ -69,6 +69,29 @@ var datelocale =
         , pm: _('pm')
         };
 
+
+function alert(a) {
+  var handler, div;
+  var close = function() {
+    handler.fadeOut(400, function() { handler.remove(); });
+    return false;
+  };
+
+  handler = $("<div id='alert_handler'></div>").hide().appendTo('body');
+
+  $("<div id='alert_background'></div>").click(close).appendTo(handler);
+
+  div = $("<div id='alert_div'></div>").appendTo(handler);
+  $("<a id='alert_close' href='javascript:void(0)'><i class='fa fa-times'></i></div>")
+  .click(close).appendTo(div);
+
+  $("<div id='alert_message'></div>").html(a).appendTo(div);
+
+  $("<button class='button alert_button'>"+_("OK")+"</button>").click(close).appendTo(div);
+
+  handler.fadeIn(400);
+}
+
 var saved = {};