Set the position to undefined to hide the overlay

examples/popup.html

@@ -10,7 +10,6 @@
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
     <style type="text/css">
       .ol-popup {
-        display: none;
         position: absolute;
         background-color: white;
         -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);

examples/popup.js

@@ -20,7 +20,7 @@ var closer = document.getElementById('popup-closer');
  * @return {boolean} Don't follow the href.
  */
 closer.onclick = function() {
-  container.style.display = 'none';
+  overlay.setPosition(undefined);
   closer.blur();
   return false;
 };
@@ -65,9 +65,7 @@ map.on('click', function(evt) {
   var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
       coordinate, 'EPSG:3857', 'EPSG:4326'));
 
-  overlay.setPosition(coordinate);
   content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
       '</code>';
-  container.style.display = 'block';
-
+  overlay.setPosition(coordinate);
 });

src/ol/overlay.js

@@ -348,7 +348,8 @@ goog.exportProperty(
 
 
 /**
- * Set the position for this overlay.
+ * Set the position for this overlay. If the position is `undefined` the
+ * overlay is hidden.
  * @param {ol.Coordinate|undefined} position The spatial point that the overlay
  *     is anchored at.
  * @observable