Sujet Précédent Sujet Suivant

Javascript: Div par dessus le reste de la page

Résolu/Fermé
Anonyme209 Messages postés 681 Date d'inscription samedi 6 octobre 2012 Statut Membre Dernière intervention 22 décembre 2020 - 13 mai 2015 à 18:24
Anonyme209 Messages postés 681 Date d'inscription samedi 6 octobre 2012 Statut Membre Dernière intervention 22 décembre 2020 - 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.
A voir également:

2 réponses

Réponse 1 / 2
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
13 mai 2015 à 20:13
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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
20 mai 2015 à 15:52
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
20 mai 2015 à 15:41
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 samedi 6 octobre 2012 Statut Membre Dernière intervention 22 décembre 2020 16
Modifié par Anonyme209 le 20/05/2015 à 15:56
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 samedi 6 octobre 2012 Statut Membre Dernière intervention 22 décembre 2020 16
Modifié par Anonyme209 le 20/05/2015 à 16:04
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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 20/05/2015 à 16:50
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 samedi 6 octobre 2012 Statut Membre Dernière intervention 22 décembre 2020 16 > animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019
20 mai 2015 à 18:15
Ç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