diff --git a/assets/docs.css b/assets/docs.css
index f02c1cdc3..e7560d4de 100644
--- a/assets/docs.css
+++ b/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;
+}
diff --git a/assets/docs.js b/assets/docs.js
index 4e5ea1009..08e5a7536 100644
--- a/assets/docs.js
+++ b/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);
+    }
+  });
 }
diff --git a/index.html b/index.html
index a1283a478..dd2121d45 100644
--- a/index.html
+++ b/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>