Discussion :

[djo007]

Bonjour à tous

j'utilise une boite de dialogue sur des liens <a> </a>
donc la boite de dialogue s'affiche lorsque je clic sur le liens définit

Je souhaiterais maintenant ouvrir ce même style de boite de dialogue mais à l'ouverture de la page...

voici comment est monté mon code:

le liens qui me permet aujourd'hui d'ouvrir ma boite de dialogue:

Code html :

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

<a href="pdf.php?id=<?php echo $id; ?>" data-reveal-id="pat_pdf"> <img src="images/icone-pdf.png" alt="Générer un PDF"/></a>

la div avec comme id="pat_pdf" qui contient le contenu de la boite de dialogue

Code html :

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

1
2
3
4
    <div id="pat_pdf" class="reveal-modal" style="max-width:600px;">
		ici le contenu de la boite de dialogue
      <a class="close-reveal-modal">×</a></div>
    <div id="pageWrap" class="pageWrap">

et enfin le fichier JS avec le code complet

Code js :

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
/*
 * jQuery Reveal Plugin 1.0
 * www.ZURB.com
 * Copyright 2010, ZURB
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
*/
 
 
 
 
(function($) {
 
/*---------------------------
 Defaults for Reveal
----------------------------*/
/*---------------------------
 Listener for data-reveal-id attributes
----------------------------*/
 
	$('a[data-reveal-id]').live('click', function(e) {
		e.preventDefault();
		var modalLocation = $(this).attr('data-reveal-id');
		$('#'+modalLocation).reveal($(this).data());
	});
 
/*---------------------------
 Extend and Execute
----------------------------*/
 
    $.fn.reveal = function(options) {
 
 
        var defaults = {  
	    	animation: 'fadeAndPop', //fade, fadeAndPop, none
		    animationspeed: 300, //how fast animtions are
		    closeonbackgroundclick: true, //if you click background will modal close?
		    dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
    	}; 
 
        //Extend dem' options
        var options = $.extend({}, defaults, options); 
 
        return this.each(function() {
 
/*---------------------------
 Global Variables
----------------------------*/
        	var modal = $(this),
        		topMeasure  = parseInt(modal.css('top')),
				topOffset = modal.height() + topMeasure,
          		locked = false,
				modalBG = $('.reveal-modal-bg');
 
/*---------------------------
 Create Modal BG
----------------------------*/
			if(modalBG.length == 0) {
				modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
			}		    
 
/*---------------------------
 Open & Close Animations
----------------------------*/
			//Entrance Animations
			modal.bind('reveal:open', function () {
			  modalBG.unbind('click.modalEvent');
				$('.' + options.dismissmodalclass).unbind('click.modalEvent');
				if(!locked) {
					lockModal();
					if(options.animation == "fadeAndPop") {
						modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
						modalBG.fadeIn(options.animationspeed/2);
						modal.delay(options.animationspeed/2).animate({
							"top": $(document).scrollTop()+topMeasure + 'px',
							"opacity" : 1
						}, options.animationspeed,unlockModal());					
					}
					if(options.animation == "fade") {
						modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
						modalBG.fadeIn(options.animationspeed/2);
						modal.delay(options.animationspeed/2).animate({
							"opacity" : 1
						}, options.animationspeed,unlockModal());					
					} 
					if(options.animation == "none") {
						modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
						modalBG.css({"display":"block"});	
						unlockModal()				
					}
				}
				modal.unbind('reveal:open');
			}); 	
 
			//Closing Animation
			modal.bind('reveal:close', function () {
			  if(!locked) {
					lockModal();
					if(options.animation == "fadeAndPop") {
						modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
						modal.animate({
							"top":  $(document).scrollTop()-topOffset + 'px',
							"opacity" : 0
						}, options.animationspeed/2, function() {
							modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
							unlockModal();
						});					
					}  	
					if(options.animation == "fade") {
						modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
						modal.animate({
							"opacity" : 0
						}, options.animationspeed, function() {
							modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
							unlockModal();
						});					
					}  	
					if(options.animation == "none") {
						modal.css({'visibility' : 'hidden', 'top' : topMeasure});
						modalBG.css({'display' : 'none'});	
					}		
				}
				modal.unbind('reveal:close');
			});     
 
/*---------------------------
 Open and add Closing Listeners
----------------------------*/
        	//Open Modal Immediately
    	modal.trigger('reveal:open')
 
			//Close Modal Listeners
			var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function () {
			  modal.trigger('reveal:close')
			});
 
			if(options.closeonbackgroundclick) {
				modalBG.css({"cursor":"pointer"})
				modalBG.bind('click.modalEvent', function () {
				  modal.trigger('reveal:close')
				});
			}
			$('body').keyup(function(e) {
        		if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key
			});
 
 
/*---------------------------
 Animations Locks
----------------------------*/
			function unlockModal() { 
				locked = false;
			}
			function lockModal() {
				locked = true;
			}	
 
        });//each call
    }//orbit plugin call
})(jQuery);

voilà merci d'avance

[SpaceFrog]

.click() ou .trigger('click')

[djo007]

.click() ou .trigger('click')

super merci beaucoup

voici ce que j'ai fais avec ^^

Code :

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

$('#sesame').trigger("click");

[greslee29]

Bonjour,

J'utilise le même script et j'aimerai aussi qu'il s'ouvre automatiquement à l'arrivée sur la page sans action nécessaire de la part de l'internaute.

Je ne vois pas a quel endroit je dois ajouter ".click() ou .trigger('click') "

Je suis vraiment novice en JS alors merci pour votre précision et indulgence

Un grand merci d'avance pour votre aide :-)
Matt

[SpaceFrog]

=> document.ready ....

http://javascript.developpez.com/faq...oduction#Ready

[greslee29]

Merci pour la réponse, mais ça ne me parle pas du tout malheureusement.

Je ne sais pas où et comment intégrer cette ligne et j'imagine qu'il faut aussi modifier ou supprimer une ligne qui fait qu'actuellement la boîte se déclenche avec un clic, genre "click.modalEvent"?

Merci.

[SpaceFrog]

Commence par le commencement ...
http://javascript.developpez.com/faq...e=Introduction

[greslee29]

Merci mais cette doc ne m'aide pas.

Il suffirait de m'en dire plus sur ma demande ce qui m'aidera certainement à mieux comprendre le mécanisme si ce genre problème se repose à moi.

Si c'est pas possible de faire ça alors tant pis.

[SpaceFrog]

Si tu ne comprends pas les bases de javascript, ce qu'est un onload ou un ready...
Tout est expliqué dans les liens donnés ...

[greslee29]

Ok génial, bonne continuation quand même.