Include a Getfeatureinfo popup in openlayers 3

/**
 * 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
  }
}));

/**
* Layers of the map
*/

var wmsSource = new ol.source.ImageWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': 'ne:ne'},
  serverType: 'geoserver'
});



//Base layers

var IGAC = new ol.layer.Tile({
				type:'base',
				title:'IGAC',
				source: new ol.source.TileWMS({
					url: 'http://geocarto.igac.gov.co/geoservicios/cien_mil/wms',
					params: {LAYERS: 'Todas', FORMAT:'image/png'},
					attributions:[
						new ol.Attribution({
							html: 'Instituto Geográfico Agustin Codazzi' + 
							'<a href="http://www.igac.gov.co">IGAC</a>',
						}),
					],
					
				})			
			});


// Overlayers			
			
var viviendas = new ol.layer.Tile({
				title:'Viviendas',
				source: new ol.source.TileWMS({
					url:'http://localhost:8080/geoserver/FrCS/wms',
					params:{LAYERS:'viviendas', format:"image/png"},
				})
			});

			
/** 
* Create the map
*/

var vista= new ol.View({
				projection: "EPSG:3857",
				center: ol.proj.transform([-71.94012,4.3937],'EPSG:4326', 'EPSG:3857'),
				zoom:12.5,
			});
			
			var map= new ol.Map({
				target:'map',
				view: vista,
				layers:[ IGAC, viviendas],
				logo: {
					href:"http://fundacionpervivir.com",
					src:"img/pervivir_fondo.png",
				},
				overlays: [overlay],
				controls: ol.control.defaults().extend([
					new ol.control.MousePosition({
						coordinateFormat: ol.coordinate.toStringHDMS,
					}),
					new ol.control.ScaleLine (),
					new ol.control.ZoomSlider(),
				]),	
				
			});


/**
 * Add a click handler to the map to render the popup.
 */
map.on('singleclick', function(evt) {
  var coordinate = evt.coordinate;
  document.getElementById('info').innerHTML = '';
  var vistaResolution = /** @type {number} */ (vista.getResolution());
  var url = wmsSource.getGetFeatureInfoUrl(
      evt.coordinate, vistaResolution, 'EPSG:3857',
      {'INFO_FORMAT': 'text/html'});

  if (url) {
    content.getElementById('info').innerHTML =
        '<code>' + url + '</code>';
  }
  overlay.setPosition(coordinate);
});

<section class="visualizador" id="map">
			<div id="popup" class="ol-popup">
			<a href="#" id="popup-closer" class="ol-popup-closer">X</a>
			<div id="popup-content"></div>
			</div>
		</section>
		<div id='info'></div>