Onload fenêtre modale

Version imprimable

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 :ccool:

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

Code:

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

Code:

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:

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:

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

Bonsoir

Code:

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>

03/12/2013, 10h47
paikan06
Merci beaucoup pour ta réponse, si je comprends bien la modif c'est le code
Code:

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 :)
03/12/2013, 11h40
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() { ... });.
03/12/2013, 16h55
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:

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
03/12/2013, 21h08
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.