rendre l'arriere plan inactif

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

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, 13h38

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

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

merci

Je cherche une soluce avec jquery si c est possible

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

Avec JqueryUI.

voir ici:

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

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

Merci

J ai donc telechargé jquery ui.

Comment ça s'utilise?

Quelqu un aurait un exemple?

Par avance merci

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

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>

rendre l'arriere plan inactif

jQuery

Vue hybride

Discussions similaires

Partager

Partager