[UI] jquery Dialog imbriqué

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:

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:

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