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

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

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.

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 :

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>

02/06/2011, 21h26	#2
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	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 __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email