Mask à l'ouverture d'une div

Version imprimable

16/06/2011, 10h18
mosted

Mask à l'ouverture d'une div

Bonjour,

Je recherche quelques pistes car j'aimerais créer un masque à l'ouverture d'une boxe div.

Enfaite, il s'agit d'un fond noir transparent qui vient cacher la page.

Est-il possible de le faire avec JQuery ?

Bien à vous,

Mosted
16/06/2011, 10h27
unnamed-anonymous

Salut,

Je pense que ça doit être possible en créant simplement une "boite" de la couleur voulue en JQUERY et en se servant d'un positionnement absolu pour que le "masque" couvre la page originale.
16/06/2011, 10h33
SpaceFrog

:google: jquery modalbox

Voici ma div.

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
 
	<div id="chat" class="actif ">
 
					<div id="chat_titre"><h3>New thermodynamic era</h3><cite>by Thomas Gerard</cite></div>
					<div id="chat_bloc">
						<div class="move">move</div>
						<div class="more">more</div>
						<div class="icon">chat</div>
 
						<div id="chat_page">
 
							<div class="chat_msg"><img src="img/user_17.jpg" class="picture" alt="" />
								<h4>Alexandre Frei :</h4>
								<p>
									Maecenas varius pulvinar diam non cursus. Integer a aliquet massa. Maecenas et orci metus. Aliquam tincidunt nunc quis tellus aliquet ornare. Donec tincidunt ullamcorper massa, vel venenatis mi venenatis in. Aliquam a lectus vel sem porttitor posuere. Nam convallis tempor est, at tristique erat congue ac. In vitae sapien a dui luctus tincidunt.
								</p>
							</div>
 
						</div>
 
							<div id="chat_add">
							<img src="img/user_17.jpg" class="picture" alt="" />
 
							<input type="hidden" id="id_p" name="id_p" value="<?php echo $id_p ?>" size="7"/>
							<input type="hidden" id="area_limit" name="area_limit" value="<?php echo $limit; ?>" size="7"/>
 
							<a href="#" onclick="return false;" class="chat_send" id="chat_send">send</a>
							<textarea name="add_to_chat" id="add_to_chat"></textarea>
 
							<p id="page_counter_area">
							</p>
 
						</div>
					</div>
				</div>

Enfaite c'est une chatbox.
On peut l'ouvrire et la fermer, avec un fadeIn() et fadeOut().

Voici le code pour l'ouverture :

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
 
 
				$(function() {  
                $("#chat .more").click(function() {
                               if ($("#chat").hasClass('actif')) {
                                               $("#chat_bloc").animate({width: '111px'}, 1000, function() {
                                                               $("#chat").removeClass("actif");
                                               });
                                               $("#chat .icon").fadeIn();
                                               $("#chat_titre").fadeOut();
                                               $("#chat_page").fadeOut();
                                               $("#chat_add").fadeOut();
 
 
                               } else {
 
                                               $("#chat_bloc").animate({width: '769px'}, 1000, function() {
                                                               $("#chat").addClass("actif");
                                               });
                                               $("#chat .icon").fadeOut();
                                               $("#chat_titre").fadeIn();
                                               $("#chat_page").fadeIn();
                                               $("#chat_add").fadeIn();
 
 
                               }
 
					});
				});

J'aimerais que quand la chatbox est en active, qu'elle est totalement ouverte,
un fond noir d'une certaine opacité remplisse l'écran.

J'ai cherché différent script mais aucun ne marche.

Je pense qu'il y a une solution super simple, mais je ne vois pas laquelle.

Créé un <div> avec un fond spéciale opacité, et ensuite lors de l'ouverture, la faire apparaitre.

Je viens de tester ça me donne ça :

http://projet87.lescigales.org/screen.png

16/06/2011, 16h32
llaffont

Utilise la réponse de SpaceFrog et Google. Tu devrais voir une certaine similitude avec ton besoin.
16/06/2011, 16h49
mosted

J'ai tester avec jquery et dowWindow, et ça me pète toute mes divs.

J'ai juste besoin d'un voile noir autour de 2 div !

http://projet87.lescigales.org/screen2.png

La chatbox, et le titre de la chat box.
20/06/2011, 13h19
gwinyam

ChatBox, n'est qu'un énième terme inutile pour redéfinir une fenêtre modale. Ou en anglais : modalbox.

SpaceFrog t'as déjà largement donné une vraie piste de recherche ;)
20/06/2011, 22h10
danielhagnoul

Bonsoir

En plus des réponses déjà données, il y a un tutoriel : Créez une fenêtre modale avec CSS et jQuery.

Dans les commentaires sur le tutoriel, j'ai donné le code de ma version que je viens de corriger pour la rendre compatible avec les versions de jQuery supérieures à 1.5.2. Voir : http://www.developpez.net/forums/d82...y/#post5830691