Pour ton popup, si tu veux le coder toi même, tu peux proceder ainsi :
- chargement su xml avec le donné (je pense que xml et aproprié, c'est facile a générer avec un language serveur)
- retranscription du xml (avec getelementsbytagName)
- mettre les infos dans les differentes balises html
- enfin mettre le tout dans un div et placer ce div au milieu de la page avec le fond gris
Pour le chargement du xml regarde dans un post plus bas, j'ai posté des codes qui marche trés bien même si j'ai encore des doutes.
Une fois que tu as ton xml dans ta variable tu parcours celui si avec le DOM, getelementsbytagName, firstChild, nextSibling etc...Je peux pas t'aider tout dépend de la structure de ton xml
Ensuite du place le tout dans des balises html appropriés. Si ça peux t'aider ses deux fonctions te permettrons de placer ton div au milieu:
function getWindowSize(){
windowWidth = window.innerWidth;
windowWidth = (windowWidth)? windowWidth : document.documentElement.clientWidth;
windowWidth = (windowWidth)? windowWidth : document.body.clientWidth;
windowHeight = window.innerHeight;
windowHeight = (windowHeight)? windowHeight: document.documentElement.clientHeight;
windowHeight = (windowHeight)? windowHeight: document.body.clientHeight;
return {'width': windowWidth, 'height': windowHeight};
}
function getPageSize(){
var windowSize = getWindowSize()
var xScroll = document.body.scrollWidth;
var yScroll = (window.innerHeight && window.scrollMaxY)? window.innerHeight + window.scrollMaxY : document.body.scrollHeight;
var pageWidth = (xScroll < windowSize.width)? windowSize.width : xScroll;
var pageHeight = (yScroll < windowSize.height)? windowSize.height : yScroll;
return {'width': pageWidth, 'height': pageHeight};
}
Tu l'appeles comme ça:
var windowSize = getWindowSize();
var pageSize = getPageSize();
et par exemple pour centrer un element:
if (objText) {
objText.style.top = ((windowSize.height - 35 - objText.height) / 2) + 'px';
objText.style.left = ((pageSize.width - 20 - objText.width) / 2) + 'px';
}