title: Using Openlayers 3 clicks mouse and pop-up Overlay.is not work
body: <p>I use openlayers3 to display the map, now I want to click on the mouse pop-up a dialog box, but no matter how I modify the following code  can not pop-up window, please help check, thank every body. The following code is a bit long, but I really don't know where I was wrong, so I have to post it all. I'm sorry.</p>
  
  <pre><code>&lt;pre&gt;&lt;code&gt;
  
      &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
      &lt;html&gt;  
      &lt;head&gt;  
      &lt;meta http-equiv="X-UA-Compatible" content="IE=10"&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"&gt;  
      &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;  
      &lt;title&gt;OpenLayers MapQuest Demo&lt;/title&gt;  
  
          &lt;style type="text/css"&gt;  
              html, body, #map{  
                  padding:0;  
                  margin:0;  
                  height:100%;  
                  width:100%;  
              }  
              .mouse-position-wrapper{
                  width:300px; 
                  height:29px; 
                  color:#FF00FF; 
                  position:absolute; 
                  right:20px; 
                  bottom:6px; 
                  z-index:999;
                }
                .ol-rotate{
                  right:40px;
                }
                .ol-scale-line {
                  left:180px;
                }
                .ol-zoomslider{
                  top:120px;
                  left: 9px;
                }
                #map {
                  clear: both;
                  position: relative;
                  border: 1px solid black;
              }
                #main{
                    width: 1024px;
                    height: 380px;
                }
                .ol-overlaycontainer-stopevent
                {
                display:none;
                } 
                .div_options_background,.div_options
                {
                    position: absolute;
                    top: 5px;
                    left: 5px;
                    //padding: 3px 5px; 
                    border-radius: 5px 5px;
                }
                .div_options_background
                {
                    //background-color: #3385ff;
                }
                .scale-line {
                    position: absolute;
                    bottom:0px;
                    left:0px; 
                    z-index:1999;
                  }
                  .ol-scale-line {
                    position: relative;
                    bottom: 0px;
                    left: 0px;
                    z-index:1999;         
                  }
                  .ol-popup {
                      position: absolute;
                      background-color: white;
                      padding: 15px;
                      border-radius: 10px;
                      border: 1px solid #cccccc;
                      bottom: 12px;
                      left: -50px;
                  z-index:1999;
                    }
  
                    .ol-popup:after, .ol-popup:before {
                      top:0;// 100%;
                      border: solid transparent;
                      content: " ";
                      height: 0;
                      width: 0;
                      position: absolute;
                      pointer-events: none;
                    z-index:1999;
                    }
                    .ol-popup:after {
                      border-top-color: white;
                      border-width: 10px;
                      left: 48px;
                      margin-left: -10px;
                    z-index:1999;
                    }
                    .ol-popup:before {
                      border-top-color: #cccccc;
                      border-width: 11px;
                      left: 48px;
                      margin-left: -11px;
                    z-index:1999;
                    }
                    .ol-popup-closer {
                      text-decoration: none;
                      position: absolute;
                      top: 2px;
                      right: 8px;
                    z-index:1999;
                    }
                    .ol-popup-closer:after {
                      content: "✖";
                    z-index:1999;
                    }
                    *popup code is end.
          &lt;/style&gt;  
          &lt;script src="/Scripts/js/jquery2.1.3.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="/Scripts/commonjs/mf_urlOp.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="/Scripts/ext4.2/ext-all.js"&gt;&lt;/script&gt;
          &lt;script src="/view/GIS/measure.js" type="text/javascript"&gt;&lt;/script&gt;
  
          &lt;link href="/Scripts/ext4.2/resources/ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css"/&gt;
              &lt;script src="/Scripts/js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;link href="/Scripts/js/bootstrap.min.css" rel="stylesheet" type="text/css"/&gt;   
  
          &lt;!--
          &lt;link rel="stylesheet" href="http://localhost:8099/geoserver/openlayers3/ol.css" type="text/css"&gt;
          &lt;script src="http://localhost:8099/geoserver/openlayers3/ol.js" type="text/javascript"&gt;&lt;/script&gt;
          --&gt;
  
          &lt;script src="/Scripts/js/ol.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="/Scripts/js/ol.css"&gt;
      &lt;/head&gt;  
      &lt;body &gt;  
      &lt;div id='main'&gt;
      &lt;div id="popup" class="ol-popup"&gt;mmmmmmmmmmmmmmmmmm
      &lt;a href="#" id="popup-closer" class="ol-popup-closer"&gt;&lt;/a&gt;
      &lt;div id="popup-content" style="width:300px; height:120px;"&gt;aaaaaaaaaaaaaaaaaaaaa&lt;/div&gt;
      &lt;/div&gt;
          &lt;div id="map" class="map"&gt;
  
  
  
       &lt;div id="scale-line" class="scale-line"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="div_options_background"&gt;&lt;/div&gt;
      &lt;div class="div_options" id="div_options" &gt;
      模式:
      &lt;select id="select_mode" style='font-size:12px;border-radius: 5px;'&gt;
      &lt;option value ="HaiYang_XiaoQuQuYu_WU"&gt;全部隐藏&lt;/option&gt;
      &lt;option value ="HaiYang_XiaoQuQuYu_YCWD" onclick="setStyle(layerImage_QuYu,'HaiYang_XiaoQuQuYu_YCWD');"&gt;一网温度&lt;/option&gt;
      &lt;option value="HaiYang_XiaoQuQuYu_YCYL"&gt;一网&lt;/option&gt;
      &lt;option value="audi"&gt;未完...&lt;/option&gt;
      &lt;/select&gt;
  
      &amp;nbsp;测量:&lt;select id="type" style="border-radius:5px"&gt;
      &lt;option value=""&gt;无&lt;/option&gt;
      &lt;option value="length"&gt;线&lt;/option&gt;
      &lt;option value="area"&gt;面&lt;/option&gt;
      &lt;/select&gt;
      &lt;ol id="measureOutput" style="margin:0;padding: 0;text-align: center;background-color: lightgreen;"&gt;&lt;/ol&gt;
      &lt;/div&gt;
      &lt;/div&gt;
           &lt;div id="label" style="display: none;"&gt;      
              &lt;div id="marker" class="marker" title="Marker"&gt;
                  &lt;a class="address" id="address" target="_blank" href="http://www.openlayers.org/"&gt;标注点11111111111&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
              &lt;div id="location"&gt;&lt;/div&gt;
              &lt;div id="scale"&gt;
          &lt;/div&gt;
          &lt;div id="nodelist"&gt;
              &lt;em&gt;Click on the map to get feature info&lt;/em&gt;
          &lt;/div&gt;
  
  
         &lt;script type="text/javascript"&gt;  
         var mousePositionControl = new ol.control.MousePosition({
             className: 'custom-mouse-position',
             target: document.getElementById('location'),
             coordinateFormat: ol.coordinate.createStringXY(5),
             undefinedHTML: '&amp;nbsp;'
           });
          var projection =ol.proj.get("EPSG:3857");    
  
          var format = 'image/png';
          var bounds = [126.23673285210907, 30.151201961467336,
              140.6467487034272, 40.939360900441784];
          var projectionExtent =/*[-100,-90,100,90];*/ projection.getExtent();
  
  
          var size = ol.extent.getWidth(projectionExtent) / 256;
          var res = new Array(18);
          var matrixIds = new Array(18);
          for (var z = 1; z &lt; 19; ++z) {
              res[z] = size / Math.pow(2, z);
              matrixIds[z] = z;
          }
          var scaleLineControl = new ol.control.ScaleLine();
          var layerImage_QuYu=  new ol.layer.Image({
                  source: new ol.source.ImageWMS({
                      ratio: 1,
                      url: 'http://localhost:8099/geoserver/cite/wms',
                      params: {'FORMAT': format,
                               'VERSION': '1.1.1',  
                            STYLES: 'HaiYang_XiaoQuQuYu_WU',
                            "exceptions": 'application/vnd.ogc.se_inimage',
                            "LAYERS": 'cite:View_HaiYangXiaoQu',
                      }
                    })
                  });
  
          var map = new ol.Map({
             controls:ol.control.defaults().extend([mousePositionControl]),
            layers: [
  
              new ol.layer.Tile({
                source: new ol.source.WMTS({
                  name: "中国矢量1-4级",
                  url: "http://t0.tianditu.com/vec_w/wmts?tk=70ef04fe6a1cedea7cd7523dfd7816ff",
                  layer: "vec",
                  style: "default",
                  matrixSet: "w",
                  format: "tiles",
                  wrapX: true,
                  projection: projection,
                  tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent),
                    resolutions: res,
                    matrixIds: matrixIds,//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
                  })
                }),
              }),
  
              new ol.layer.Tile({
                source: new ol.source.WMTS({
                  name: "中国矢量注记1-4级",
                  //url: "http://t7.tianditu.gov.cn/cva_c/wmts?tk=70ef04fe6a1cedea7cd7523dfd7816ff",
                  url: "http://t{0-7}.tianditu.gov.cn/cva_w/wmts?tk=70ef04fe6a1cedea7cd7523dfd7816ff",
                  layer: "cva",
                  style: "default",
                  //matrixSet: "c",
                  matrixSet: "w",
                  format: "tiles",
                  wrapX: true,
                  projection: projection,
                  tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent),
                    resolutions: res,
                    matrixIds:matrixIds,// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
                  })
                }),
              }), 
              layerImage_QuYu,
                  new ol.layer.Image({
                      source: new ol.source.ImageWMS({
                        ratio: 1,
                        url: 'http://localhost:8099/geoserver/cite/wms',
                        params: {'FORMAT': format,
                                 'VERSION': '1.1.1',  
                              STYLES: '',
                              LAYERS: 'cite:SSql_GuanDao',
                        }
                      })
                    }),
                    new ol.layer.Tile({
                      visible: false,
                      source: new ol.source.TileWMS({
                        url: 'http://localhost:8099/geoserver/cite/wms',
                        params: {'FORMAT': format, 
                                 'VERSION': '1.1.1',
                                 tiled: true,
                              STYLES: '',
                              LAYERS: 'cite:SSql_GuanDao',
                        }
                      })
                    }),
            ],
            target: "map",
            controls: ol.control.defaults().extend([
                new ol.control.ScaleLine({className: 'ol-scale-line', target: document.getElementById('scale-line')}),
                mousePositionControl,
              ]),
            view: new ol.View({
                projection: projection,
                center: [13486339.06881, 4406575.57138],
                zoom: 4
            })
          });
  
          //单击事件
          map.on('singleclick', function(evt) {
              var typeSelect=document.getElementById('type');
              if(typeSelect.value!="")
              {
                  return;
              }
              var view = map.getView();
              var viewResolution = view.getResolution();
              var source = layerImage_QuYu.get('visible') ? layerImage_QuYu.getSource() : layerTile_QuYu.getSource();
              var url = source.getGetFeatureInfoUrl(
                evt.coordinate, viewResolution, view.getProjection(),
                {'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50});
              if (url) {
                  if(mf_urlOp.getParam(url,"QUERY_LAYERS")=="cite%3AView_HaiYangXiaoQu"
                          ||mf_urlOp.getParam(url,"QUERY_LAYERS")=="cite:View_HaiYangXiaoQu")
                  {
                      console.log(url);
                      $.ajax({
                          url:'jsonWebGIS_getInfo', 
                          data:{'url':url},
                          type: "post", //规定请求的类型（GET 或 POST）。
                          dataType:'json',
                          success: function(data) {  //请求成功后返回
                              console.log(data);
                              alert(data[0].ECHW);
                          },
                          error: function() {  //请求失败后返回
                              //alert(234);
                              console.log('Request Error.');
                          }
                      });
                  }
              }
            });
  
            map.getView().setCenter([13486339.06881, 4406575.57138]);
            map.getView().setZoom(15); 
  
            function setStyle(sourceLayer,style)
            {
                var v1=sourceLayer.getSource();
                var v2=v1.getParams();
                v2.STYLES=style;
                v1.changed();
            }
  
            init();
  
            /**
             * Elements that make up the popup.
             */
            var container = document.getElementById('popup');
            var content = document.getElementById('popup-content');
            var closer = document.getElementById('popup-closer');
  
  
            /**
             * Add a click handler to hide the popup.
             * @return {boolean} Don't follow the href.
             */
            closer.onclick = function() {
              overlay.setPosition(undefined);
              closer.blur();
              return false;
            };
  
            /**
             * Create an overlay to anchor the popup to the map.
             */
            var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
              element: container,
              autoPan: true,
              autoPanAnimation: {
                duration: 250   //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度. 单位为毫秒（ms）
              }
            }));
  
              //overlay.setPosition([13486339.06881, 4406575.57138]);    
  
            /**
             * Add a click handler to the map to render the popup.
             */
            map.addEventListener('click', function(evt) {
              var coordinate = evt.coordinate;
              var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
                  coordinate, 'EPSG:3857', 'EPSG:4326'));
              content.innerHTML = '&lt;p&gt;你点击的坐标是：&lt;/p&gt;&lt;code&gt;' + hdms + '&lt;/code&gt;';
  
              container.style.height = "100px;"
                  content.style.overflowY = "scroll";
              content.style.height = "90px";
              content.style.width = "100px";
  
              overlay.setPosition(coordinate);
              map.addOverlay(overlay);
            });
      &lt;/script&gt;  
      &lt;/body&gt;
      &lt;/html&gt;
  &lt;/code&gt;&lt;/pre&gt;
  </code></pre>