Preview on click

assets/docs.css

@@ -30,3 +30,7 @@ h1, h2, h3, h4, h5, h6 {
   margin-bottom: 8px;
   overflow: hidden;
 }
+
+.all-flags .flag-icon-background {
+  cursor: pointer;
+}

assets/docs.js

@@ -8,4 +8,16 @@ window.onload = function () {
       document.getElementById('btn-bootstrap').innerHTML = document.getElementById('btn-bootstrap').innerHTML.replace('Enable', 'Disable');
     }
   }
+
+  $('.all-flags .flag-icon-background').click(function(event){
+    var flag = $(event.currentTarget).attr('title');
+    var w = 640;
+    var h = 480;
+    var left = (screen.width / 2) - (w / 2);
+    var top = (screen.height / 2) - (h / 2);
+
+    if (flag) {
+      window.open('/flags/4x3/' + flag + '.svg', 'flag-4x3', 'width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
+    }
+  });
 }

index.html

@@ -227,7 +227,7 @@ <h1>Examples (on any element)</h1>
           </div>
         </div>
       </section>
-      <section>
+      <section class="all-flags">
         <div class="page-header">
           <h1>All flags</h1>
         </div>
@@ -484,7 +484,7 @@ <h1>All flags</h1>
         </div>
       </section>
     </div>
-
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
     <script src="http://localhost:35729/livereload.js"></script>
     <script src="./assets/docs.js"></script>
   </body>