UI Dialog. Aucune position du widget

**beegees** · 02/06/2011, 20h48

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 :

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
<!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

**danielhagnoul** · 02/06/2011, 21h26

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

**beegees** · 03/06/2011, 10h01

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

**danielhagnoul** · 03/06/2011, 21h47

Bonsoir

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

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

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 :

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
<!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>

UI Dialog. Aucune position du widget

jQuery

Vue hybride

Discussions similaires

Partager

Partager