Discussion :

[paikan06]

Bonjour à tous,

je viens d'implémenter une fenêtre modale sur un site, tout fonctionne parfaitement quant on click sur le lien.

Maintenant j'aimerais que la fenêtre s'ouvre à l'ouverture de la page index.
J'ai effectué plusieurs recherches sur Google, j'ai bien compris que le script était fait de telle façon que l’exécution était déclenchée par le click.

j'ai cherché toute la matinée à modifier le script pour déclencher avec onload... J'ai essayé dans le script, dans la balise body mais malheureusement sans aucun résultats.

Je suis sur que c'est relativement simple, mais j'arrive pas à un résultat satisfaisant.

Si vous avez une idée lumineuse, c'est avec grand plaisir

Si vous souhaitez des compléments d'information, c'est avec plaisir.

Code html :

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

<a href="#" data-width="500" data-rel="popup1" class="poplight"><img src="images/packages.jpg" alt="Offres et Promotions" ></a>

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
jQuery(function($){
 
	//Lorsque vous cliquez sur un lien de la classe poplight
	$('a.poplight').on('click', function() {
		var popID = $(this).data('rel'); //Trouver la pop-up correspondante
		var popWidth = $(this).data('width'); //Trouver la largeur
 
		//Faire apparaitre la pop-up et ajouter le bouton de fermeture
		$('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
 
		//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
		//Apply Margin to Popup
		$('#' + popID).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});	
		//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
		$('body').append('<div id="fade"></div>');
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();	
		return false;
	});
	//Close Popups and Fade Layer
	$('body').on('click', 'a.close, #fade', function() { //Au clic sur le body...
		$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();  
	}); //...ils disparaissent ensemble		
		return false;
	});	
});

Code css :

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
#fade { /*--Masque opaque noir de fond--*/
	display:none; /*--masqué par défaut--*/
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: 0;
	z-index: 9999;
}
.popup_block{
	display:none; /*--masqué par défaut--*/
	background: #fff;
	padding: 20px;
	border: 20px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; right: 50%;
	z-index: 99999;
	color:black;
	/*--Les différentes définitions de Box Shadow en CSS3--*/
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	/*--Coins arrondis en CSS3--*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
img.btn_close {
 
	float: right;
	margin: -55px -55px 0 0;
	}
 
/*--Gérer la position fixed pour IE6--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}

Code html :

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

1
2
3
4
5
6
<div id="popup1" class="popup_block">
	<h2>Attention offre spéciale</h2>
	<p>Offre spéciale :
</p>
 
</div>

[danielhagnoul]

Bonsoir

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
<script type="text/javascript">
 
	jQuery( function( $ ){
 
		//Lorsque vous cliquez sur un lien de la classe poplight
		$('a.poplight').on('click', function() {
 
		});
 
		//Close Popups and Fade Layer
		$('body').on('click', 'a.close, #fade', function() { //Au clic sur le body...
 
		});
 
	});
 
	jQuery( window ).load( function(){
		$( "body" ).trigger( "click" );
	});
 
</script>

[paikan06]

Merci beaucoup pour ta réponse, si je comprends bien la modif c'est le code

Code :

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

1
2
3
jQuery( window ).load( function(){
	$( "body" ).trigger( "click" );
});

qui déclenche l'ouverture de la fenêtre. J'ai remplacer mon code par le tien mais la fenêtre modale n'apparait pas à l'ouverture de la page d'accueil.

As tu juste la possibilité de me certifier que le code href="#" div="" doit bien se situer dans la balise body.

Merci beaucoup

[danielhagnoul]

Bonjour

Je ne comprends pas la question.

Avec $( "body" ).trigger( "click" ); on provoque un clic sur le "body" qui sera géré par $('body').on('click', 'a.close, #fade', function() { ... });.

[paikan06]

Je ne sais pour quelle raison je n'arrive pas à implémenter une fenêtre modale à l'ouverture de la page d'accueil.

Une des raisons que j'ai en tête c'est que j'utilise déja jQuery pour fonction

Code :

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

1
2
 
$('.roomplan a').lightBox();

ça doit peut être faire doublon et donc empêcher l’exécution de la fenêtre.

J'ai également essayé la version qui se trouve sur ton cahier d'exercice:

http://danielhagnoul.developpez.com/...ialogModal.php

Félicitation en passant, mais sans résultats probants, je me re penche sur le problème demain matin.

Merci

[danielhagnoul]

Bonsoir

Vous devez avoir un bogue ou un problème de structure de code, je ne peux rien tester sans la totalité du code (CSS, HTML, JS) ou un lien vers la page web.