diff --git a/examples/stocks-fn/lib/stock_app.dart b/examples/stocks-fn/lib/stock_app.dart
index 8eacdc827fb..8b6ea059cb3 100644
--- a/examples/stocks-fn/lib/stock_app.dart
+++ b/examples/stocks-fn/lib/stock_app.dart
@@ -11,6 +11,7 @@ import 'package:sky/framework/components/icon_button.dart';
 import 'package:sky/framework/components/input.dart';
 import 'package:sky/framework/components/menu_divider.dart';
 import 'package:sky/framework/components/menu_item.dart';
+import 'package:sky/framework/components/modal_overlay.dart';
 import 'package:sky/framework/components/popup_menu.dart';
 import 'package:sky/framework/components/scaffold.dart';
 import 'package:sky/framework/debug/tracing.dart';
@@ -61,19 +62,29 @@ class StocksApp extends App {
     });
   }
 
-  void _handleSearchQueryChanged(query) {
+  void _handleSearchQueryChanged(String query) {
     setState(() {
       _searchQuery = query;
     });
   }
 
-  void _handleMenuClick(_) {
+  void _handleMenuShow(_) {
     setState(() {
       _menuController = new PopupMenuController();
       _menuController.open();
     });
   }
 
+  void _handleMenuHide(_) {
+    setState(() {
+      _menuController.close().then((_) {
+        setState(() {
+          _menuController = null;
+        });
+      });
+    });
+  }
+
   Drawer buildDrawer() {
     return new Drawer(
       controller: _drawerController,
@@ -116,7 +127,7 @@ class StocksApp extends App {
             onGestureTap: _handleSearchBegin),
           new IconButton(
             icon: 'navigation/more_vert_white',
-            onGestureTap: _handleMenuClick)
+            onGestureTap: _handleMenuShow)
         ]),
       _actionBarStyle);
   }
@@ -135,25 +146,17 @@ class StocksApp extends App {
       _searchBarStyle);
   }
 
+  void addMenuToOverlays(List<Node> overlays) {
+    if (_menuController == null)
+      return;
+    overlays.add(new ModalOverlay(
+      children: [new StockMenu(controller: _menuController)],
+      onDismiss: _handleMenuHide));
+  }
+
   Node build() {
     List<Node> overlays = [];
-
-    if (_menuController != null) {
-      overlays.add(new EventTarget(
-        new StockMenu(controller: _menuController),
-        onGestureTap: (_) {
-          // TODO(abarth): We should close the menu when you tap away from the
-          // menu rather than when you tap on the menu.
-          setState(() {
-            _menuController.close().then((_) {
-              setState(() {
-                _menuController = null;
-              });
-            });
-          });
-        }
-      ));
-    }
+    addMenuToOverlays(overlays);
 
     return new Scaffold(
       header: _isSearching ? buildSearchBar() : buildActionBar(),
diff --git a/framework/components/modal_overlay.dart b/framework/components/modal_overlay.dart
new file mode 100644
index 00000000000..95854f63f71
--- /dev/null
+++ b/framework/components/modal_overlay.dart
@@ -0,0 +1,27 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../fn.dart';
+
+class ModalOverlay extends Component {
+  static final Style _style = new Style('''
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;''');
+
+  List<Node> children;
+  GestureEventListener onDismiss;
+
+  ModalOverlay({ Object key, this.children, this.onDismiss }) : super(key: key);
+
+  Node build() {
+    return new EventTarget(
+      new Container(
+        style: _style,
+        children: children),
+      onGestureTap: onDismiss);
+  }
+}