menu modal completed

assets/linker/styles/app.less

@@ -9,6 +9,23 @@
 
 body {
     color: #fff;
+
+    .modal-content {
+        background-color: rgba(0,0,0,0.8);
+        .close {
+            color: #fff;
+            opacity: 1;
+            font-size: inherit;
+            font-size: 4em;
+            float: none;
+        }
+        .modal-header {
+            border: none;
+            text-align: right;
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+    }
 }
 #page {
     .interior {

assets/linker/templates/invitee/update-order.jade

@@ -8,11 +8,13 @@ block pagetitle
 block interiorcontent
     div(ng-show='show')
         p Hi {{ invitee.name }}! You are all going to {{ run.restaurant }}. 
-            span(ng-show='showMenuUrl') Here is the 
-                a(href='{{ run.menuUrl }}',target="_blank") menu.
+            span.pull-right(ng-show='showMenuUrl')
+                a.btn.btn-default(href='{{ run.menuUrl }}',target="_blank",data-toggle='modal',data-target='#menuModal')
+                    span.glyphicon.glyphicon-list-alt
+                    |  Show Menu
 
         .row
-            .col-xs-12.col-sm-6
+            .col-xs-12.col-sm-7
                 h2 Update your order
                 form.form.create-order-form(role='form')
                     div.form-group
@@ -20,7 +22,7 @@ block interiorcontent
 
                     button.btn.btn-lg.btn-primary.btn-block(ng-click='submit(invitee)') Update Order
 
-            .col-xs-12.col-sm-6
+            .col-xs-12.col-sm-5
                 div.pod.others-orders
                     h2 Other's orders
                     ul.list-group(ng-repeat='i in invitees')
@@ -30,10 +32,13 @@ block interiorcontent
                             strong {{ i.name }}
                             | : {{ i.order }}
 
-        div(ng-show='showMenuUrl')
-            h2
-                | Menu 
-                a.btn.btn-sm.btn-default.pull-right(href='{{ run.menuUrl }}',target='_blank')
-                    span.glyphicon.glyphicon-new-window
-
+block modals
+    .modal.fade#menuModal(tabindex=-1,role='dialog',aria-labelledby='menuModalLabel',aria-hidden='true')
+        .modal-dialog.modal-lg
+            .modal-content
+                .modal-header
+                     
+                    button.close(type='button',data-dismiss='modal',aria-hidden='true') ×
+                .modal-body
+                    h4.hidden.modal-title#menuModalLabel Menu
                     iframe(ng-src='{{ menuUrl }}',width='100%',height='400px')

assets/linker/templates/layouts/interior-page.jade

@@ -9,3 +9,5 @@
     block interiorcontent
 
 include ../includes/nav
+
+block modals