Popup passant sans raison apparente en arrière plan sur IE et Chrome (Ok Firefox et Opera)

**philou8** · 16/02/2012, 21h20

Bonsoir,

Voci une application simplifiée illustrant le problème.
Une Infowindow contient une liste déroulante d'images construite avec Jquery.
Un clic sur l'une de ces images provoque l'ouverture d'une fenêtre.
Cette fenêtre reste sur le devant avec Firefox et Opéra, mais passe en arrière plan automatiquement avec IE ou Chrome.
Pouvez-vous me dire pourquoi, et me donner une solution qui me permettrait de maintenir la fenêtre ouverte sur le devant avec IE et Chrome (sachant que je ne peut agir sur le contenu de l'URL affiché).

Merci d'avance
Trachy

Voici le lien : (cliquez sur le Marker, puis survolez et cliquez dans l'image " ... " pour faire apparaitre la liste déroulante d'images, puis cliquez dans l'une des imapes pour faire apparaitre la fenêtre)

http://www.cybtechnologie.com/essai/essaiPOPUP.htm

Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Info Window Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- script jQuery liste déroulante icones -->
<script type="text/javascript" src="libraryjQuery/customdropdown/js/jquery.js" ></script>
	<script type="text/javascript" src="libraryjQuery/customdropdown/js/jquery-dropdown.js" ></script>
<!-- Feuilles de style jQuery liste déroulante icones-->
<link rel="stylesheet" type="text/css" href="libraryjQuery/customdropdown/customdropdown.css" />
 
 
<script type="text/javascript">
 
var strsitesweb="<ul><li value='1'><img src='mairie.jpg' alt='http://www.toulouse.fr' title='http://www.toulouse.fr' /></li><li value='2'><img src='ot.jpg' alt='http://www.tourisme.fr' title='http://www.tourisme.fr' /></li><li value='3'><img src='abritel.jpg' alt='http://www.abritel.fr' title='http://www.abritel.fr' /></li><li value='4'><img src='wikipedia.jpg' alt='http://www.wikipedia.fr' title='http://www.wikipedia.fr' /></li><li value='5'><img src='wikitravel.jpg' alt='http://www.wikitravel.fr' title='http://www.wikitravel.fr' /></li></ul>";
 
function popup(url){
	window.open(url,'paysagesdumonde','toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes,width=1170,height=600,screenx=0,screenY=0,left=0,top=0');
	return;
	}
 
  function selecteur_icones(){
	$(function(){
	document.getElementById('id_select_icones').innerHTML = strsitesweb;
	$("#id_select_icones ul:eq(0)").imgDropDown({title:"<img id='image_selected' src='points.jpg'  alt='autres sites' title='autres sites'/>", callback:f});});
	}
 
 function f(content)
      //fonction utilisée pour présenter le site web à partir du sélecteur d'icônes - récupération du nom de l'url dans "content" par traitement de chaine de caractères
	{var debut = content.html().indexOf("http");
	var fin = content.html().indexOf(" ",debut);
	var web_site = content.html().substring(debut,fin);
	// selon navigateur le nom est terminé par une apostrophe ou un guillemet
	if((web_site.charAt(web_site.length - 1)=='"')||(web_site.charAt(web_site.length - 1)=="'")){web_site=web_site.substring(0,web_site.length-1)};
	popup(web_site);
	} 
 
function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var myOptions = {
      zoom: 4,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
 
  var contentString = "<div id='content' ><table><tr><td><img src='australie.jpg' /></td><td valign='top'><div id='id_select_icones'><a href='#' onmouseover='javascript:selecteur_icones();'><img src='points.jpg'   border='1' /></a></div></td></tr></table></div>";
 
 
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
 
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
  }
 
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

**ticroch** · 17/02/2012, 09h15

Perso j'ai un IE6 ici (oui je sais la honte mais je suis au boulot :p), et ca fonctionne corretement ici !

Sinon en ce qui concerne mettre des objets en arrière plan ou en avant, il faut utiliser la propriété css z-index normalement (si z-index est le plus grand, l'élément se trouvera au premier plan), mais je ne connais pas trop l'API de Google ....

**NoSmoking** · 17/02/2012, 14h20

Bonjour,
mettre le focus sur la fenêtre nouvellement ouverte.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function popup(url){
  var oWin = window.open(url,'paysagesdumonde','toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes,width=1170,height=600,screenx=0,screenY=0,left=0,top=0');
  oWin.focus();
}

Popup passant sans raison apparente en arrière plan sur IE et Chrome (Ok Firefox et Opera)

APIs Google

Discussions similaires

Partager

Partager