Javascript: Div par dessus le reste de la page

Résolu
Anonyme209 Messages postés 681 Date d'inscription   Statut Membre Dernière intervention   -  
Anonyme209 Messages postés 681 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je veux faire une espèce de boite de dialogue en javascript.
Cette boite de dialogue se mettra par dessus le reste de la page, en grisant éventuellement le fond.
Je ne parle pas de la fonction alert(); car je veux que mes boites de dialogues soient entièrement personnalisables, par exemple que le contenu d'un div s'affiche.

Merci de votre aide.
A voir également:

2 réponses

Réponse 1 / 2
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Bonjour

voici un exemple en jquery (tu dois appeler la librairie jquery dans le <head>)

html 
<button class="ouvrir">ouvrir</button></p></div>
<div id="fond"></div>
<div id="box">
<p>ton contenu</p>
<p><button class="fermer">fermer</button></p>
</div>


css 

#fond {
    display:none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: #999999;
    z-index:99; /* supérieur a toute la page sauf box */
    opacity:0.5;
    filter: alpha(opacity=50);  
}

#box {
    display:none;
    width:200px;
    height:280px;
    position:fixed;
    left:50%; /* centrer */
    top:50%; /* centrer */
    margin:-160px 0 0 -100px; /* width et height / par 2 */
    background-color:#FFFFCC;
    z-index:100; 
}


jquery 

$(document).ready(function(){
$(".ouvrir").click(function(){$("#fond").show(500);$("#box").show(500);});
$(".fermer").click(function(){$("#fond").hide(500);$("#box").hide(500);});
});


voila
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Re
oui n'importe quelle balise html avec la classe ouvrir est valable
pour appeller la librairie jquery
dans la section <head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>


et le jquery apres <body> 
<script type="text/javascript">
$(document).ready(function(){
$(".ouvrir").click(function(){$("#fond").show(500);$("#box").show(500);});
$(".fermer").click(function(){$("#fond").hide(500);$("#box").hide(500);});
});
</script>
0
Réponse 2 / 2
Utilisateur anonyme
 
Salut,

il y existe dialog() de jquery ui qui est sympa aussi. Tu peux les personnaliser aussi comme tu veux.

https://jqueryui.com/dialog/

bonne journée
0
Anonyme209 Messages postés 681 Date d'inscription   Statut Membre Dernière intervention   16
 
Je n'arrive pas à faire fonctionner jQuery.
J'ai bien appelé la bibliothèque.

Est-ce que c'est possible en Javascript exclusivement?
0
Anonyme209 Messages postés 681 Date d'inscription   Statut Membre Dernière intervention   16
 
Non je n'ai rien dit, ça marche en fait.
Y-a-t-il juste un moyen pour que la taille de la boite de dialogue s'adapte au contenu, tout en restant au centre? (je parle de la solution d'animostab)
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
oui en hauteur par exemple avec jquery
d'abors dans le css tu mets height:auto; pour #box
ensuite 

<script type="text/javascript">
$(document).ready(function(){
$(".ouvrir").click(function(){$("#fond").show(500);$("#box").show(500);});
$(".fermer").click(function(){$("#fond").hide(500);$("#box").hide(500);});
var hauteur= $("#box").height();
var demi = hauteur / 2;
$("#box").css("margin-top", "-"+demi+"px");
});
</script>
0
Anonyme209 Messages postés 681 Date d'inscription   Statut Membre Dernière intervention   16 > animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention  
 
Ça ne marche pas vraiment, ça s'adapte bien au contenu mais ce n'est plus centré.
J'ai modifié la taille manuellement en fonction du contenu et modifié les propriétés left et top manuellement aussi.
0