Bonjour,
voici mon soucis
dans une application web (framework struts), j'ouvre des popups à l'aide de jquery ui mais dans une dialog il est possible d'avoir un lien qui doit ouvrit une nouvelle dialog.
J'ai fait en sorte que toutes les dialogs soient ouvertes depuis la page parent de la première dialog ouverte.
Ça fonctionne plutôt bien pour l'ouverture des dialogs mais ça se complique à la fermeture.
Les dialogs contiennent un bouton (qui n'est pas créé avec le plugin ui mais c'est un <input type="button" .../> qui contient onclick='window.close()' ) et quand je clique sur le bouton Fermer de la 2è dialog c'est la 1ere qui se ferme
Voici le code pour l'ouverture des dialogs :
popup.js :
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
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 var prntWindow = getParentWindowWithDialog(); //$(top)[0]; var $dlg = prntWindow && prntWindow.$dialog; if ($dlg) { window.dialogArguments = $dlg.dialogArguments; } if ($dlg) window.close = function() { if ($dlg) { $dlg.dialogWindow.dialog("close"); } }; /** * Ouverture d'une popup en modale * @param url : url à afficher dans la popup * @param options : options de la popup : width, height, etc ... * @param args : paramètres à passer à la fenêtre qui serviront au traitement des données retournées par la popup à la fenêtre appelante * Si aucun traitement n'est à faire à la fermeture de la popup, mettre null * @param objRetour : objet javascript passé à la popup afin de récupérer les données en retour à la fermeture de la popup * */ function ouvrirFenetreModale(url, options, args, objRetour) { if (typeof(options.title)=="undefined" || options.title == '') options.title='OPTICOLL'; if (typeof(options.dialogWidth)=="undefined") options.dialogWidth='auto'; if (typeof(options.dialogHeight)=="undefined") options.dialogHeight='auto'; if (typeof(options.dialogTop)=="undefined") options.dialogTop=''; if (typeof(options.dialogLeft)=="undefined") options.dialogLeft=''; if (typeof(options.isValeurRetour)=="undefined") options.isValeurRetour=false; if (typeof(options.retour)=="undefined") options.retour=false; $('body').addClass('stop-scrolling'); // appel de la fonction jquery pour l'ouverture de la popup // on lui applique les paramètres passés jQuery().showModalDialog({ url: url, dialogArguments: objRetour, args: args, height: options.dialogHeight, width: options.dialogWidth, //top: options.dialogTop, //left: options.dialogLeft, scrollable: true, edge: 'raised', help: 'no', status: 'no', title: options.title, retour: options.retour, onClose: function() { $('body').removeClass('stop-scrolling'); var returnedValue = this.returnValue; }, doPostBackAfterCloseCallback: options.isValeurRetour }); } /** * Fonction à appeler à la fermeture de la popup * Elle met à jour l'objet utilisé pour le traitement des données en retour par la fenêtre appelante * @param obj : objet javascript (entier, array, etc ...) */ function setWindowReturnValue(obj) { if ($dlg) { $dlg.dialogArguments.actif = "on"; //$dlg.dialogArguments.params = obj; $dlg.dialogArguments.params = obj; $dlg.returnValue = true; } window.returnValue = true; // in case popup is called using showModalDialog }; function getParentWindowWithDialog() { var p = window.parent; var previousParent = p; while (p != null) { if ($(p.document).find('#iframeDialog').length) return p; p = p.parent; if (previousParent == p) return null; // save previous parent previousParent = p; } return null; }; function getWindowReturnValue() { // in case popup is called using showModalDialog if (!$dlg && window.returnValue != null) return window.returnValue; return $dlg && $dlg.returnValue; };
jquery.modal.js :
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
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 (function($) { $.fn.showModalDialog = function(options) { var defaultOptns = { url: null, dialogArguments: null, args: null, height: 'auto', width: 'auto', //top: 'auto', //left: 'auto', position: 'center', resizable: true, scrollable: true, edge: 'raised', help: 'no', status: 'no', title: '', onClose: function() {}, returnValue: null, doPostBackAfterCloseCallback: false, postBackElementId: null, retour: false }; var fns = { close: function() { //$(this).dialog('close'); opts.returnValue = $dialog.returnValue; opts.dialogArguments = $dialog.dialogArguments; opts.onClose(); if (opts.doPostBackAfterCloseCallback) { postBackFunction(opts.args, opts.returnValue, opts.dialogArguments); } }, adjustWidth: function() { $frame.css("width", "100%"); } }; // build main options before element iteration // surcharge des options de la fenêtre modale avec le paramètre passé par la fenêtre appelante var opts = $.extend({}, defaultOptns, options); // création dynamique d'une iframe qui sert à l'affichage du contenu de la popup var $frame= window.parent.$('<iframe id="iframeDialog" frameborder="0" />'); if (opts.doPostBackAfterCloseCallback) { $frame= $('<iframe id="iframeDialog" frameborder="0" />'); } // mise en forme de l'iframe if (opts.scrollable) $frame.css('overflow', 'auto'); $frame.css({ 'padding': 0, 'frameborder' : 0, 'margin': 0, 'padding-bottom': 5 }); // création de la fenêtre modale var $dialogWindow = $frame.dialog({ autoOpen: true, modal: true, width: opts.width, height: opts.height, //top: opts.top, //left: opts.left, resizable: opts.resizable, position: opts.position, edge: opts.edge, help: opts.help, status: opts.status, // overlay --> pour griser l'arrière plan à l'ouverture de la popup overlay: { opacity: 0.1, background: "black" }, buttons: { Cancel: function() { jQuery( this ).dialog( "close" ); } }, close: fns.close, resizeStop: fns.adjustWidth }); $frame.attr('src', opts.url); fns.adjustWidth(); // ouverture de la fenêtre modale $frame.load(function() { if ($dialogWindow) { if (typeof(opts.title)!="undefined") { $dialogWindow.dialog('option', 'title', opts.title); } else { $dialogWindow.dialog('option', 'title', ''); } } }); $dialog = new Object(); $dialog.dialogArguments = opts.dialogArguments; $dialog.dialogWindow = $dialogWindow; $dialog.returnValue = null; }; })(jQuery);
je sais que c'est mal codé mais je débute en jquery et c'est une application web qui existe depuis longtemps
Partager