Javascript: Div par dessus le reste de la page

Résolu

Anonyme209 -

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.

Afficher la suite

A voir également

Quelque chose bloque le fonctionnement de javascript sur votre ordinateur
Pad ordinateur bloqué - Guide
Clavier de l'ordinateur - Guide
Nettoyer ordinateur lent - Guide
# Sur clavier ordinateur - Guide
Comment réinitialiser un ordinateur - Guide

2 réponses

animostab

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

animostab

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>

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
1. Anonyme209 Auteur
  
  Je n'arrive pas à faire fonctionner jQuery.
  J'ai bien appelé la bibliothèque.
  
  Est-ce que c'est possible en Javascript exclusivement?
  
  0
2. Anonyme209 Auteur
  
  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
3. animostab
  
  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
4. Anonyme209 Auteur
  
  @animostabÇ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

Javascript: Div par dessus le reste de la page

2 réponses

Discussions similaires

Newsletters