Javascript: Div par dessus le reste de la page

Résolu

Anonyme209 Messages postés 761 Statut Membre -
Anonyme209 Messages postés 761 Statut Membre - 20 mai 2015 à 18:15

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
Réinitialiser ordinateur - Guide
Code puk bloqué - Guide
# Sur clavier ordinateur - Guide

2 réponses

animostab Messages postés 3003 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

animostab Messages postés 3003 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>

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 Messages postés 761 Statut Membre 19
  
  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 Messages postés 761 Statut Membre 19
  
  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 Messages postés 3003 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
  1. Anonyme209 Messages postés 761 Statut Membre 19 > animostab Messages postés 3003 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

Javascript: Div par dessus le reste de la page

2 réponses

Discussions similaires

Newsletters