UI Dialog. Aucune position du widget

Version imprimable

Bonsoir,

Sur ce site : test

Vous pouvez cliquer sur le bouton

J'aurais voulu que la popup s'ouvre comme dans l'exemple ici :

http://jqueryui.com/demos/dialog/#option-show

J'ai l'impression qu'il y a un problème avec mon widget.

Manque t'il du css ou est-ce que mon code n'est pas correct ?

Voici le code :

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
<!DOCTYPE html> 
<html> 
<head> 
	<meta http-equiv=" Content-Type" content="text/html; charset=utf-8" /> 
	<link rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css"/> 
    <link rel="stylesheet" href="jquery/development-bundle/themes/ui-lightness/jquery.ui.accordion.css" />
    <link rel="stylesheet" href="jquery/development-bundle/themes/base/jquery.ui.accordion.css" />
 
 
    <link rel="stylesheet" href="jquery/css/ui-lightness/jquery-ui-1.8.13.custom.css" />
	<link rel="stylesheet" href="jquery/css/jquery.ui.datepicker.css" />
 
    <link rel="stylesheet" href="jquery/css/ui.theme.css" />
 
 
	<script type="text/javascript" src="js/jquery.js"></script> 
	<script type="text/javascript" src="js/changeVisibilityOfList.js"></script> 
    <script type="text/javascript" src="jquery/js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="jquery/js/jquery-ui-1.8.13.custom.min.js"></script>
	<script type="text/javascript" src="jquery/js/jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="jquery/development-bundle/ui/jquery.ui.dialog.js"></script>
    <script type="text/javascript">
		$(document).ready(function () {
 
 
			//jquery UI dialog
			$('#dialog').click(function(){
				$( "#examen" ).dialog({
					height: 140,
					position: 'center'
				});
			});
 
 
		}); 
	</script>
</head> 
<body>
<input type="button" id="dialog"> 
<div id="examen"></div>
 
</body> 
</html>

Avez-vous une idée ?

Merci d'avance.

beegees

02/06/2011, 21h26
danielhagnoul

Bonsoir

C'est quoi ce head ? On revient toujours au même problème !

Voir les messages de @Bovino et mon message :
http://www.developpez.net/forums/d10...y/#post6019561
03/06/2011, 10h01
beegees

Citation:

Envoyé par danielhagnoul

Bonsoir

C'est quoi ce head ? On revient toujours au même problème !

Voir les messages de @Bovino et mon message :
http://www.developpez.net/forums/d10...y/#post6019561

Bonsoir,

La page de test que je vous ai montré est incomplète.

Sur ma page de production, j'ai un accordion, un datepicker et un dialog, ce qui explique qu'il y a autant de source dans le head (enfin je pense).

Bonne journée à vous.

beegees

Bonsoir

C'est la dernière fois que je corrige ce "head" cauchemardesque ! :marteau:

Si vous ne mettez pas en pratique les conseils que vous sollicitez, vous allez décourager les personnes qui vous aident.

Citation:

Sur ma page de production, j'ai un accordion, un datepicker et un dialog, ce qui explique qu'il y a autant de source dans le head (enfin je pense).

Tous les composants jQuery UI fonctionnent avec un lien vers le style UI, jQuery et jQuery UI. Vos liens supplémentaires ne font que perturber le bon fonctionnement de UI.

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Forum jQuery</title>
 
	<!-- Utilité ? Mais n'est pas utile pour ce test.
	<link rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css"/>
	-->
 
	<!-- A SUPPRIMER
    <link rel="stylesheet" href="jquery/development-bundle/themes/ui-lightness/jquery.ui.accordion.css" />
    <link rel="stylesheet" href="jquery/development-bundle/themes/base/jquery.ui.accordion.css" />
    <link rel="stylesheet" href="jquery/css/ui-lightness/jquery-ui-1.8.13.custom.css" />
	<link rel="stylesheet" href="jquery/css/jquery.ui.datepicker.css" />
    <link rel="stylesheet" href="jquery/css/ui.theme.css" />
	-->
 
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/ui-lightness/jquery-ui.css">
 
    <!-- A SUPPRIMER
	<script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="jquery/js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="jquery/js/jquery-ui-1.8.13.custom.min.js"></script>
	<script type="text/javascript" src="jquery/js/jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="jquery/development-bundle/ui/jquery.ui.dialog.js"></script
	-->
 
	<!-- Utilité ? Mais n'est pas utile pour ce test.
	<script src="js/changeVisibilityOfList.js"></script> 
	-->
 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script>
		$(function () {
			//jquery UI dialog
			$('#dialog').click(function(){
				$( "#examen" ).dialog({
					height: 140,
					position: 'center'
				});
			});
		}); 
	</script>
</head> 
<body>
	<input type="button" id="dialog"> 
	<div id="examen"></div>
</body> 
</html>