Enlever le bouton fermer sur dialog

skurty · 07/05/2010, 10h37

Bonjour,

je suis en train de réaliser une page un peu à la façon d'une commande sur Internet avec plusieurs étapes. Il y en a deux où j'ai besoin d'afficher une boîte de dialogue.

La première doit être redimensionnée, déplaçable et avec un bouton fermer.

La seconde doit avoir une taille fixe, ne doit pas être redimensionnée et il ne faudrait pas donner la possibilité à l'utilisateur de la fermer parce que j'affiche une barre de progression pendant un traitement en Ajax (assez long). J'ai donc désactivé la fermeture avec le bouton "échap" et je voudrais enlever le bouton "Fermer" mais il n'y a pas d'option prévue pour ça et je ne sais pas comment modifier le code de jQuery pour garder les deux types de fenêtres.

Les deux doivent griser le reste de la page, je les ait donc mise en modal.

Voici le code de la première fenêtre :

Code :

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

1
2
3
4
5
6
7
8
9
$(function(){		
            $('#dialog').dialog({
                        autoOpen: false,
                        modal: true,
                        closeText: 'Fermer',
                        width: 800,
                        height: 600
            });
});

Et de la seconde :

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
$(function(){		
            $('#dialog').dialog({
                        autoOpen: false,
                        modal:true,
                        width: 500,
                        height: 200,
                        draggable: false,
                        resizable: false,
                        closeOnEscape: false,
                        open: function() {
                                    // déclaration de variables                     
                                    // boucle for et traitement avec une page PHP avec $.post
                        }
           });
});

J'utilise la bibliothèque jQuery (comment ça c'est évident

) et al bibliothèque jQuery UI avec d'autres interactions pour d'autres pages.

Merci d'avance

**danielhagnoul** · 08/05/2010, 23h33

Bonsoir.

Exemple :

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
113
114
115
116
117
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.1.custom.css">	
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.1.custom.min.js"></script>
 	<script>
		$(function(){
			$("#dialogueUn").dialog({
				autoOpen: false,
				modal: true,
				buttons: {
					"Fermer": function(){
						$(this).dialog("close");
					}
				}
			});
 
            $("#dialogueDeux").dialog({
				autoOpen: false,
				modal:true,
				width: 500,
				height: 200,
				draggable: false,
				resizable: false,
				closeOnEscape: false,
				open: function() {
					// déclaration de variables                     
					// boucle for et traitement avec une page PHP avec $.post
 
					setTimeout(function(){
						$("#dialogueDeux").dialog("close");
					}, 5000);
				}
           });
 
			$("#btn1").click(function(){
				$("#dialogueUn").dialog("open");
			});
 
			$("#btn2").click(function(){
				$("#dialogueDeux").dialog("open").prev().find(".ui-dialog-titlebar-close").css("display","none");
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<button id="btn1">Montre 1</button> <button id="btn2">Montre 2</button>
 
		<div id="dialogueUn" title="Basic dialog">
			<p>
				This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
			</p>
		</div>
 
		<div id="dialogueDeux" title="Dialogue n° 2">
			<p>
				Vivamus eu ante. Morbi tristique augue quis magna. Nullam tristique lorem id neque. Nam nibh elit, lobortis ac, euismod eu, feugiat id, diam. Etiam dui est, fringilla eget, dictum faucibus, ultrices ut, massa. Duis tempor. In eu elit quis urna eleifend ultrices. In sollicitudin. Phasellus laoreet. Sed aliquet diam vel nibh. In aliquet pharetra mi. Ut et sem. Phasellus ultrices libero sit amet ipsum.
			</p>
		</div>
	</div>
</body>  
</html>

skurty · 10/05/2010, 09h24

Merci pour ta réponse qui m'a beaucoup aidé

Enlever le bouton fermer sur dialog

jQuery

Vue hybride

Discussions similaires

Partager

Partager