Mask à l'ouverture d'une div

[mosted]

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

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

[SpaceFrog]

jquery modalbox

[mosted]

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

[llaffont]

Utilise la réponse de SpaceFrog et Google. Tu devrais voir une certaine similitude avec ton besoin.

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

[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

[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