[enh] Implements bootstrap modal as confirm dialog.

css/style.less

@@ -209,24 +209,51 @@ body {
  *
  */
 
-#popup {
+#modal {
     .modal;
     .fade;
     overflow-y: auto;
 
     & > div {
       .modal-dialog;
+      & > div {
         .modal-content;
       }
-
-    #popup-title {
-        .modal-header;
-        .modal-title;
     }
-    #popup-body {
+
+    header {
+      .modal-header;
+
+      .title {
+        .modal-title;
+        font-weight: bold;
+        text-transform: uppercase;
+        margin: 0;
+      }
+    }
+    &.no-title header {display: none;}
+
+    .content {
       .modal-body;
     }
+
+    footer {
+      .modal-footer;
+
+      button {
+        .btn;
+        &#modal-cancel {.btn-link;}
+        &#modal-confirm {.btn-primary;}
+      }
+    }
 }
+@media (min-width: 768px) {
+  #modal > div > div {
+    width: 600px;
+    margin: 30px auto;
+  }
+}
+
 
 /* 
  * Various styles 

index.html

@@ -40,10 +40,23 @@
 
     </div>
 
-    <div id="popup" role="dialog"><div>
-        <h2 id="popup-title"></h2>
-        <div id="popup-body"></div>
+    <div id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
+        <div><div>
+            <header>
+                <button type="button" class="close" data-dismiss="modal">
+                    <span aria-hidden="true">&times;</span>
+                    <span class="sr-only" data-y18n="close">Close</span>
+                </button>
+                <h4 class="title" id="modalLabel"></h4>
+            </header>
+            <div class="content"></div>
+            <footer>
+                <button type="button" id="modal-cancel" data-action="cancel" data-y18n="cancel">Cancel</button>
+                <button type="button" id="modal-confirm" data-action="confirm" data-y18n="ok">OK</button>
+            </footer>
         </div></div>
+    </div>
+
 
     <script type="text/javascript" src="js/vendor/jquery-1.10.1.min.js"></script>
     <script type="text/javascript" src="js/vendor/handlebars-v1.3.0.js"></script>

js/app.js

@@ -228,6 +228,7 @@ app = Sammy('#main', function (sam) {
 
             loaded = true;
             $('div.loader').remove();
+            $('#modal').modal('hide');
 
             if (enableSlide) {
                 function leSwap() {
@@ -279,6 +280,48 @@ app = Sammy('#main', function (sam) {
             }
         },
 
+        confirm: function(title, content, confirmCallback, cancelCallback) {
+            // Default callbacks
+            confirmCallback = typeof confirmCallback !== 'undefined' ? confirmCallback : function() {};
+            cancelCallback = typeof cancelCallback !== 'undefined' ? cancelCallback : function() {};
+
+            // Get modal element
+            box = $('#modal');
+
+            // Modal title
+            if (typeof title === 'string' && title.length) {
+                $('.title', box).html(title);
+            }
+            else {
+                box.addClass('no-title');
+            }
+
+            // Modal content
+            $('.content', box).html(content);
+
+            // Handle buttons
+            $('footer button', box)
+                .click(function(e){
+                    e.preventDefault();
+
+                    // Reset & Hide modal
+                    box
+                        .removeClass('no-title')
+                        .modal('hide');
+
+                    // Do corresponding callback
+                    if ($(this).data('action') == 'confirm') {
+                        confirmCallback();
+                    }
+                    else {
+                        cancelCallback();
+                    }
+                });
+
+            // Show modal
+            return box.modal('show');
+        },
+
         arraySortById: function(arr) {
             arr.sort(function(a, b){
                 if (a.id > b.id) {

locales/en.json

@@ -37,6 +37,7 @@
     "both" : "Both",
     "home" : "Home",
     "read_more" : "Read more",
+    "cancel" : "Cancel",
 
     "installing" : "Installing",
     "installed" : "Installed",

locales/fr.json

@@ -37,6 +37,7 @@
     "both" : "Les deux",
     "home" : "Accueil",
     "read_more" : "En savoir plus",
+    "cancel" : "Annuler",
 
     "installing" : "Installation",
     "installed" : "Installé",