Fenêtre modale ouverture au lancement de la page

**jvoile** · 25/06/2014, 10h00

Bonjour,

Au sein de ma page php, j'ai intégré un script pour l'ouverture d'une fenêtre modale. Celui ci fonctionne très bien excepté que la fenêtre ne s'ouvre qu'en cliquant sur un lien.

J'aurais voulu que la fenêtre modale s'ouvre automatique au lancement de la page...

J'ai essayé d'intégrer le script dans le <header> avec un timeout mais rien y faire..

Le script est le suivant actuellement entre les balises <body> et </body>

Code html :

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

1
2
3
4
5
6
7
8
<!--début du script-->
<div class="container">
<div id="content">
<div class="post">
<a href="#" data-width="700" data-rel="popup1" class="poplight">En savoir plus...</a>
</div>
<div id="popup1" class="popup_block">
<h4>texte....</h4></div>

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
jQuery(function($){
	$('a.poplight').on('click', function() {
		var popID = $(this).data('rel');
		var popWidth = $(this).data('width');
		$('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="img/close_pop.png" class="btn_close" title="Fermer" alt="Close" /></a>');
		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;
		$('#' + popID).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
		$('body').append('<div id="fade"></div>');
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
		return false;
	});
	$('body').on('click', 'a.close, #fade', function() {
		$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();  
		});
		return false;
	});
});

Merci d'avance pour votre aide !!
Cordialement,

**Bovino** · 25/06/2014, 10h21

Bah... si tu ne veux pas qu'elle s'ouvre au clic sur un lien, ne la déclare pas au clic sur un lien... Si tu veux qu'elle s'ouvre au chargement de la page, déclare la au chargement de la page...

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
jQuery(function($){
	var popID = $(this).data('rel');
	var popWidth = $(this).data('width');
	$('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="img/close_pop.png" class="btn_close" title="Fermer" alt="Close" /></a>');
	var popMargTop = ($('#' + popID).height() + 80) / 2;
	var popMargLeft = ($('#' + popID).width() + 80) / 2;
	$('#' + popID).css({ 
		'margin-top' : -popMargTop,
		'margin-left' : -popMargLeft
	});
	$('body').append('<div id="fade"></div>');
	$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
	$('body').on('click', 'a.close, #fade', function() {
		$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();  
		});
		return false;
	});
});

**jvoile** · 25/06/2014, 10h24

Bonjour,

Merci je vais tester ce soir avec votre proposition...
Juste une précision je peux laisser le script dans le body ou mieux vaut-il le placer dans le head ?

Cldt,

**Bovino** · 25/06/2014, 10h33

Il est toujours préférable (et conseillé) de séparer la structure HTML, la mise en page CSS et les interactions JavaScript, donc effectivement, il vaut mieux éviter de mettre les scripts au milieu de la page.
Quant à la position idéale, c'est une question expliquée dans la FAQ. Mais dans ton cas, vu que tu utilises jQuery(...);, mettre le script dans la partie <head> me semble pertinent.

Fenêtre modale ouverture au lancement de la page

jQuery

Vue hybride

Discussions similaires

Partager

Partager