affichage popup dans open layer

Bonjour tout le monde.
Je suis nouvelle dans les SIG,je voudrai créer une application qui affiche un popup avec informations de la base de données lorsque l'on clique sur la carte.
le code pour l'affichage de ma carte est le suit:

<head>
<title>OpenLayers map preview</title>

<link rel="stylesheet" type="text/css" href="http://localhost:8080/geoserver/openlayers/theme/default/style.css"/>


<script src="http://localhost:8080/geoserver/openlayers/OpenLayers.js" type="text/javascript">
</script>
<script defer="defer" type="text/javascript">
var map;
var untiled;
var tiled;
var pureCoverage = false;
// pink tile avoidance
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
// make OL compute scale according to WMS spec
OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

function init(){
// if this is just a coverage or a group of them, disable a few items,
// and default to jpeg format
format = 'image/png';
if(pureCoverage) {
document.getElementById('filterType').disabled = true;
document.getElementById('filter').disabled = true;
document.getElementById('antialiasSelector').disabled = true;
document.getElementById('updateFilterButton').disabled = true;
document.getElementById('resetFilterButton').disabled = true;
document.getElementById('jpeg').selected = true;
format = "image/jpeg";
}

var bounds = new OpenLayers.Bounds(
235247.15133, 1623366.14575,
254570.67, 1638750
);//226159.8, 1620335.5
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 110.9799609375001,
projection: "EPSG:2010",
units: 'm'
};
map = new OpenLayers.Map('map', options);

// setup tiled layer
tiled = new OpenLayers.Layer.WMS(
"mymap - Tiled", "http://localhost:8080/geoserver/wms",
{
height: '1000',
width: '2000',
layers: 'mymap',
styles: '',
srs: 'EPSG:2010',
format: format,
tiled: 'true',
tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
},
{
buffer: 0,
displayOutsideMaxExtent: true
}
);

// setup single tiled layer
untiled = new OpenLayers.Layer.WMS(
"mymap - Untiled", "http://localhost:8080/geoserver/wms",
{
height: '1000',
width: '2000',
layers: 'mymap',
styles: '',
srs: 'EPSG:2010',
format: format
},
{singleTile: true, ratio: 1}
);

map.addLayers([untiled, tiled]);

// build up all controls
map.addControl(new OpenLayers.Control.PanZoomBar({
position: new OpenLayers.Pixel(2, 15)
}));
map.addControl(new OpenLayers.Control.Navigation());
// map.addControl(new OpenLayers.Control.Scale($('scale')));
map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
map.zoomToExtent(bounds);

// wire up the option button
var options = document.getElementById("options");
options.onclick = toggleControlPanel;

// support GetFeatureInfo
map.events.register('click', map, function (e) {
document.getElementById('nodelist').innerHTML = "Loading... please wait...";
var params = {
REQUEST: "GetFeatureInfo",
EXCEPTIONS: "application/vnd.ogc.se_xml",
BBOX: map.getExtent().toBBOX(),
X: e.xy.x,
Y: e.xy.y,
INFO_FORMAT: 'text/html',
QUERY_LAYERS: map.layers[0].params.LAYERS,
FEATURE_COUNT: 50,
Layers: 'mymap',
Styles: '',
Srs: 'EPSG:2010',
WIDTH: map.size.w,
HEIGHT: map.size.h,
format: format};
OpenLayers.loadURL("http://localhost:8080/geoserver/wms", params, this, setHTML, setHTML);
OpenLayers.Event.stop(e);
});
}

// sets the HTML provided into the nodelist element
function setHTML(response){
document.getElementById('nodelist').innerHTML = response.responseText;
};

// shows/hide the control panel
function toggleControlPanel(event){
var toolbar = document.getElementById("toolbar");
if (toolbar.style.display == "none") {
toolbar.style.display = "block";
}
else {
toolbar.style.display = "none";
}
event.stopPropagation();
map.updateSize()
}

// Tiling mode, can be 'tiled' or 'untiled'
function setTileMode(tilingMode){
if (tilingMode == 'tiled') {
untiled.setVisibility(false);
tiled.setVisibility(true);
map.setBaseLayer(tiled);
}
else {
untiled.setVisibility(true);
tiled.setVisibility(false);
map.setBaseLayer(untiled);
}
}

// changes the current tile format
function setImageFormat(mime){
// we may be switching format on setup
if(tiled == null)
return;

tiled.mergeNewParams({
format: mime
});
untiled.mergeNewParams({
format: mime
});
/*
var paletteSelector = document.getElementById('paletteSelector')
if (mime == 'image/jpeg') {
paletteSelector.selectedIndex = 0;
setPalette('');
paletteSelector.disabled = true;
}
else {
paletteSelector.disabled = false;
}
*/
}

// sets the chosen style
function setStyle(style){
// we may be switching style on setup
if(tiled == null)
return;

tiled.mergeNewParams({
styles: style
});
untiled.mergeNewParams({
styles: style
});
}

function setAntialiasMode(mode){
tiled.mergeNewParams({
format_options: 'antialias:' + mode
});
untiled.mergeNewParams({
format_options: 'antialias:' + mode
});
}

function setPalette(mode){
if (mode == '') {
tiled.mergeNewParams({
palette: null
});
untiled.mergeNewParams({
palette: null
});
}
else {
tiled.mergeNewParams({
palette: mode
});
untiled.mergeNewParams({
palette: mode
});
}
}

function setWidth(size){
var mapDiv = document.getElementById('map');
var wrapper = document.getElementById('wrapper');

if (size == "auto") {
// reset back to the default value
mapDiv.style.width = null;
wrapper.style.width = null;
}
else {
mapDiv.style.width = size + "px";
wrapper.style.width = size + "px";
}
// notify OL that we changed the size of the map div
map.updateSize();
}

function setHeight(size){
var mapDiv = document.getElementById('map');

if (size == "auto") {
// reset back to the default value
mapDiv.style.height = null;
}
else {
mapDiv.style.height = size + "px";
}
// notify OL that we changed the size of the map div
map.updateSize();
}

function updateFilter(){
if(pureCoverage)
return;

var filterType = document.getElementById('filterType').value;
var filter = document.getElementById('filter').value;

// by default, reset all filters
var filterParams = {
filter: null,
cql_filter: null,
featureId: null
};
if (OpenLayers.String.trim(filter) != "") {
if (filterType == "cql")
filterParams["cql_filter"] = filter;
if (filterType == "ogc")
filterParams["filter"] = filter;
if (filterType == "fid")
filterParams["featureId"] = filter;
}
// merge the new filter definitions
mergeNewParams(filterParams);
}

function resetFilter() {
if(pureCoverage)
return;
document.getElementById('filter').value = "";
updateFilter();
}

function mergeNewParams(params){
tiled.mergeNewParams(params);
untiled.mergeNewParams(params);
}
</script>
</head>
<body onLoad="init()">
<div id="toolbar" style="display: none;">
<ul>
<li>
<a>Tiling:</a>
<select id="tilingModeSelector" onChange="setTileMode(value)">
<option value="untiled">Single tile</option>
<option value="tiled">Tiled</option>
</select>
</li>
<li>
<a>Antialias:</a>
<select id="antialiasSelector" onChange="setAntialiasMode(value)">
<option value="full">Full</option>
<option value="text">Text only</option>
<option value="none">Disabled</option>
</select>
</li>
<li>
<a>Format:</a>
<select id="imageFormatSelector" onChange="setImageFormat(value)">
<option value="image/png">PNG 24bit</option>
<option value="image/png8">PNG 8bit</option>
<option value="image/gif">GIF</option>
<option id="jpeg" value="image/jpeg">JPEG</option>
</select>
</li>
<li>
<a>Styles:</a>
<select id="imageFormatSelector" onChange="setStyle(value)">
<option value="">Default</option>
</select>
</li>

<li>
<a>Width/Height:</a>
<select id="widthSelector" onChange="setWidth(value)">
<option value="auto">Auto</option>
<option value="600">600</option>
<option value="750">750</option>
<option value="950">950</option>
<option value="1000">1000</option>
<option value="1200">1200</option>
<option value="1400">1400</option>
<option value="1600">1600</option>
<option value="1900">1900</option>
</select>
<select id="heigthSelector" onChange="setHeight(value)">
<option value="auto">Auto</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="600">600</option>
<option value="700">700</option>
<option value="800">800</option>
<option value="900">900</option>
<option value="1000">1000</option>
</select>
</li>
<li>
<a>Filter:</a>
<select id="filterType">
<option value="cql">CQL</option>
<option value="ogc">OGC</option>
<option value="fid">FeatureID</option>
</select>
<input type="text" size="80" id="filter"/>
<img id="updateFilterButton" src="http://localhost:8080/geoserver/openlayers/img/east-mini.png" onClick="updateFilter()" title="Apply filter"/>
<img id="resetFilterButton" src="http://localhost:8080/geoserver/openlayers/img/cancel.png" onClick="resetFilter()" title="Reset filter"/>
</li>
</ul>
</div>
<div id="map">
<img id="options" title="Toggle options toolbar" src="http://localhost:8080/geoserver/options.png"/>
</div>
<div id="wrapper">
<div id="location">location</div>

</div>
<div id="nodelist">

</div>
</body>

Quelqu'un peut m'aider SVP.