1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
|
function showDivPopup(idToShow, titrePopup) {
// test si autre navigateur que Internet explorer
if(!window.createPopup) {
alert("Ce navigateur ne connaît pas les objets Popup.\nVeuillez utiliser Internet Explorer");
return false;
}
// Création du popup
var oPopup = window.createPopup();
var oPopBody = oPopup.document.body;
// On va chercher le DIV dont on veut le contenu
var divToShow = document.getElementById(idToShow);
// ajout des div et mise en forme
oPopBody.innerHTML = "<div id='divPopup'>"; // div général
// pas de titre s'il n'est pas passé en paramètres.
if(titrePopup) {
var styleTitre = //"background-color:#99CCCC;"+
"font-weight:bold;"+
"color:black;"+
"border-bottom: 1px solid black;"+
"fontFamily:Verdana, Geneva, Helvetica, Arial, sans-serif;";
oPopBody.innerHTML += "<div id='titrePopup' style='"+styleTitre+"'>"+titrePopup+"</div>"; // titre du popup
}
oPopBody.innerHTML += divToShow.innerHTML; // div déjà présent sur la page
oPopBody.style.backgroundColor = "#99CCCC";
oPopBody.style.border = "solid black 2px";
oPopBody.style.margin = "5px";
oPopBody.style.color = "black";
oPopBody.style.textAlign = "justify";
oPopBody.style.fontFamily = "Verdana, Geneva, Helvetica, Arial, sans-serif";
oPopBody.style.fontSize = "12px";
oPopBody.innerHTML += "</div>";
// Largeur et hauteur du popup : divToShow.offsetWidth et .offsetHeight
// donnent la largeur et la hauteur du DIV dont l'id est idToShow
// (faire quelques essais pour trouver les bonnes valeurs)
var pWidth = divToShow.offsetWidth + 80;
var pHeight = divToShow.offsetHeight + 28;
// Position d'affichage du popup
// Plein de solutions possibles : on peut par exemple le placer
// par rapport à l'objet qui a déclenché l'évènement.
// Là, il est placé par rapport à cet objet et au pointeur de la souris.
var posX = event.offsetX;
var posY = event.offsetY;
// affichage du popup
oPopup.show(posX, posY, pWidth, pHeight, event.srcElement);
} |
Partager