rendre l'arriere plan inactif

Version imprimable

15/07/2009, 13h21
nico72

rendre l'arriere plan inactif

Salut,

Dans le cas ou il me manque certaines infos (identifiants de connection par ex), j affiche une div qui invite l'utilisateur a se connecter.
J ai vu que l on pouvait griser et rendre inactif l'arriere plan (peut on le faire avec jquery?)

Si quelqu un a des infos la dessus je suis preneur

Merci
15/07/2009, 13h38
Bovino

Oui, c'est possible.
Un exemple sans jQuery mais facilement adaptable.
16/07/2009, 13h17
nico72

merci

Je cherche une soluce avec jquery si c est possible
16/07/2009, 13h46
nrgizgun

Avec JqueryUI.

voir ici:

http://jqueryui.com/demos/dialog/#modal
16/07/2009, 17h19
nico72

Merci

J ai donc telechargé jquery ui.

Comment ça s'utilise?

Quelqu un aurait un exemple?

Par avance merci

Bonsoir.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.2.custom.css" media="screen" />
	<style type="text/css">
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, 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;
		}
	</style>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#dialog").dialog({
				bgiframe: true,
				height: 140,
				width: 400,
				modal: true
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
		<div id="dialog" title="Basic modal dialog">
			<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
		</div>
 
		<!-- Sample page content to illustrate the layering of the dialog -->
		<div class="hiddenInViewSource" style="padding:20px;">
			<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
			<form>
				<input value="text input" /><br />
				<input type="checkbox" />checkbox<br />
				<input type="radio" />radio<br />
				<select>
					<option>select</option>
				</select><br /><br />
				<textarea>textarea</textarea><br />
			</form>
		</div>
		<!-- End sample page content -->
 
	</div>
</body>
</html>

17/07/2009, 12h08
nico72

merci a toi

Cela peut il se faire avec la version complete de jquery (je suppose que oui, mais je demande quand meme)

Et puis quelle difference, finalement entre la version allegée et complete?

En tout cas, encore merci a toi
17/07/2009, 19h41
danielhagnoul

Bonsoir.

J'utilise la version complète la plus récente, elle est marquée custom, car chez choisi un style par défaut ici : http://jqueryui.com/download
17/07/2009, 19h46
nico72

Ok

La, je commence un peu a m embrouiller serieux

Je suis debutant sur jquery, et ce que j ai pu faire pour le moment (avec l aide precieuse de ce forum) me semblait dans mes cordes.

Mais la je comprends plus bien

Pourrait tu m expliquer les librairies que tu charges (et pourquoi celles la?)

Bon, merci, a+
17/07/2009, 20h11
danielhagnoul
Bonsoir.
Code:

1 2 3 <script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="lib/jquery-ui-1.7.2.custom.min.js"></script>
jQuery-1.3.2 c'est la base sur laquelle tout repose

jQuery-ui-1-7-2 c'est de nombreux compléments (widget) souvent interdépendants, c'est la raison pour laquelle je prends la totalité.
17/07/2009, 22h15
nico72

ok, encore merci

Donc, si je remplace la premiere ligne par :

Citation:

<script type="text/javascript" src="js/jquery-1.3.1.js"></script>

ça doit marcher je suppose ?

Y a un bug apparemment (je suis le lien demo donné plus haut)

Si je ferme la modale, que j actualise, la modale reapparait avec un double (ghost)

Dites moi si vous avez pareil
17/07/2009, 22h23
danielhagnoul

UI 1.7.2 à besoin de jQuery 1.3.2 !
18/07/2009, 20h06
nico72

merci beaucoup

J ai bien testé la fenetre modale avec jqueryui, ça marche bien (encore merci a daniel)

J ai essayé de voir comment on pouvait la modifier et j ai du mal a comprendre.

En effet, je voudrai qu elle ne soit ni draggable, ni redimensionnable.

Je voudrai la customiser a mes couleurs, y inclure un formulaire et comble de tout, recuperer les valeurs du formulaires en php et, recuper ces variables php en js

Ou peut on trouver ces infos?

Par avance, merci

salut

Bon, en lisant la doc jqueryui (en anglais, ce fut dur), je suis finalement arrivé a personaliser ma modale.

Je n ai pas trouvé comment supprimer la croix de fermeture en haut a droite alors j ai supprimé les lignes css correspondantes.

Pour le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 $(document).ready(function(){ $("#connect").dialog({ height: 240, width: 160, modal: true, resizable : false, title : 'Connection', closeOnEscape:false, }); });
et
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div id="connect"> <form action="verif_connect.php"> <br /> <label for="login" style="margin-left:10px;color:black;font-size:12px;font-weight:bold;width:100px;">Login</label> <br /> <input type="text" style="margin-left:10px;color:grey;font-size:12px;font-weight:bold;width:100px;"/> <br /> <label for="pass" style="margin-left:10px;color:black;font-size:12px;font-weight:bold;width:100px;">Password</label> <br /> <input type="password" style="margin-left:10px;color:grey;font-size:12px;font-weight:bold;width:100px;"/><br /> <br /> <input type="submit" value="connexion" style="margin-left:10px;color:black;font-size:12px;font-weight:bold;background:#CCCCCC;width:110px;"/> </form> </div>
Voila, maintenant je me pose d autres questions

1- Je voudrai n afficher la modale que si les identifiants de connexion ne sont pas presents (donc comment je recuperes mes variables de session php en js)

2-Je voudrai que le bouton du formulaire lance une requete pour verifier que le compte utilisateur existe bien.

Si on le compte existe : fermeture de la modale recuperation des identifiants en php ?????

S il n existe pas, modale toujours presente + message d'erreur.

Voila, pour moi c est pas simple.

Merci a ceux/celles qui pourront m'aiguiller