J'ai un div et après avoir cliqué sur un bouton, j'aimerais que la Div apparaisse (que je puisse faire), mais j'aimerais que tout le fond devienne plus sombre (ceci est en ligne avec des superpositions).
J'ai essayé d'utiliser l'opacité - je change l'opacité de l'ensemble du code HTML avec jQuery, c'est-à-dire $ ('html'). CSS ('opacité', '- 0,5'); et changer Retour L'opacité de la DIV à la normale, mais pour une raison quelconque, l'opacité de la div reste la même (0,5).
Je n'aime pas vraiment l'opacité depuis en réalité, cela ne rend pas le fond plus sombre (plutôt plus léger).
8 Réponses :
vous voudriez une boîte de dialogue "modale". Il est essentiellement accompli en utilisant un divisé sous-jacent et un ensemble de fond.
JQuery UI prend en charge ici: http://jqueryui.com/demos/dialog/#modal < / a>, mais vous pouvez voir comment ils le font en inspectant.
Voulez-vous dire qu'il n'y a pas de raccourci simple pour faire cela? Je pensais que c'était quelques lignes de code JQuery / HTML
$ ('# modal'). dialogue ({modal: vrai}); est assez simple, lorsque vous utilisez cette bibliothèque.
Tout d'abord, pour opacité, vous ne définissez pas de numéro négatif. Deuxièmement, pour rendre le fond plus sombre, vous pouvez le faire:
$ ('html'). CSS ('opacité', '1'); est solide et complètement visible, et $ ('html'). CSS ('opacité', '0 '); est complètement invisible. Tout ce qui est compris entre (0,2, 0,5, 0,7) devient plus visible la fermeture à 1.
1. J'aimerais que le contenu du HTML soit toujours visible, mais seulement plus sombre. 2-4 Je l'ai déjà fait.
En effet, j'utilise 0,5 (au lieu de -0,5). Désolé.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a class="play" href="javascript:void(0);">PLAY</a></p>
<div class="video_popup">
<div class="popup_content">
<a class="popup_close" href="javascript:void(0);"><img src="_/images/close.png"></a>
<object width="560" height="315">
<param name="movie" value="http://www.youtube.com/v/-pJcKCqxtAM?version=3&hl=en_US&atuoplay=1">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/v/-pJcKCqxtAM?version=3&hl=en_US&atuoplay=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"/>
</object>
</div>
</div>La démonstration ne semble rien faire dans IE9.
Ligne très importante $ ('. Video_popup'). Hauteur ($ (document) .Height ()) Pour les pages plus longues. Merci encore
@Jasper MERCI! (Post-scriptum Je n'ai pas IE9 à tester, mais merci beaucoup pour le TIP, apprécier)
@ user1073201 Le $. GetDocheight est en fait une excellente fonction, il calculera le navigateur croiseur de la hauteur du document!
@Jasper hm, la démo steal dans IE8 aussi. Je vais le réparer demain correctement (c'était une pâte de copie hardcore d'un projet précédent (que BTW fonctionne dans tous les navigateurs.))
HTML -
$('#some-button').on('click', function () {
$('#overlay, #overlay-back').fadeIn(500);
});
Ceci ne couvre que la partie visible de la fenêtre, pas une page entière, si vous faites défiler vers le bas
@JVK Si vous souhaitez que la superposition couvre l'affichage, même lorsque vous faites défiler, vous pouvez utiliser la position : fixe . Si vous voulez le faire, les utilisateurs ne peuvent pas faire défiler (la page peut défiler derrière une position : fixe élément), puis lorsque vous affichez la superflilure, vous pouvez effectuer le débordement du HTML et Corps Éléments Hidden : HTML, Corps {Overflow: caché} . Si vous le faites, vous aurez probablement besoin d'enregistrer la position de défilement que vous pouvez effectuer en définissant la hauteur du corps Elément avant de régler son Overflow propriété sur caché < / code>. E.g $ ("corps"). CSS ({hauteur: $ ("corps"). Hauteur (), débordement: 'caché'})
ici et ici avec Plus d'effets de superposition . L'espoir aide.
Voici un autre exemple de ce comportement, dans la démo: cliquez sur le lien "Regarder la vidéo" pour disparaître dans la vidéo et l'écran DIP DIV (évasion pour disparaître)
jsfiddle Demo strong> p> CSS: p> <div id="screenDimmer"></div>
<div id="video"><!-- embedded video here --></div>
Cela peut être maintenant fait encore plus facile qu'auparavant. Il suffit d'utiliser un ombre absolue.
#yourDIV {
box-shadow: 0px 0px 1px 5000px rgba(0,0,0,0.8);
}
Au lieu de la valeur 5000PX, vous pouvez utiliser 100Vmax, ce qui est plus adaptable.
Bonjour, j'ai changé le code de quelqu'un qui a affiché ici, même si cela peut être résolu déjà ici est le code mis à jour de Jasper
HTML: P>
$('#some-button').on('click', function () {
$('#overlay, #overlay-back').fadeIn(1000);
});
$('#close').on('click',function(){
$('#overlay,#overlay-back').fadeOut(1000);
});
La chose la plus simple que j'ai vue à atteindre est la suivante: en cliquant sur un bouton, nous devons exécuter ci-dessus étapes. "Superposition" est l'ID de DIV que nous voulons être flou. Après une exécution réussie du script, à la fin, nous pouvons le faire pour réactiver la DIV: P> $("#overlay").removeAttr("style");
Si la DIV a un fond noir, des valeurs d'opacité plus élevées rendront le fond plus sombre et les plus basses le rendront plus léger.