rendre l'arriere plan inactif

**nico72** · 15/07/2009, 14h21

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

**Bovino** · 15/07/2009, 14h38

Oui, c'est possible.
Un exemple sans jQuery mais facilement adaptable.

**nico72** · 16/07/2009, 14h17

merci

Je cherche une soluce avec jquery si c est possible

**nrgizgun** · 16/07/2009, 14h46

Avec JqueryUI.

voir ici:

http://jqueryui.com/demos/dialog/#modal

**nico72** · 16/07/2009, 18h19

Merci

J ai donc telechargé jquery ui.

Comment ça s'utilise?

Quelqu un aurait un exemple?

Par avance merci

**danielhagnoul** · 17/07/2009, 01h24

Bonsoir.

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

**nico72** · 17/07/2009, 13h08

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

**danielhagnoul** · 17/07/2009, 20h41

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

**nico72** · 17/07/2009, 20h46

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+

**danielhagnoul** · 17/07/2009, 21h11

Bonsoir.

Code :

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

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é.

**nico72** · 17/07/2009, 23h15

ok, encore merci

Donc, si je remplace la premiere ligne par :

ç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

**danielhagnoul** · 17/07/2009, 23h23

UI 1.7.2 à besoin de jQuery 1.3.2 !

**nico72** · 18/07/2009, 21h06

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

**nico72** · 28/07/2009, 18h35

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 :

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

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 :

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

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

rendre l'arriere plan inactif

jQuery

Discussions similaires

Partager

Partager