web-dev-qa-db-fra.com

Comment changer l'opacité de l'arrière-plan lorsque le modal bootstrap est ouvert

J'utilise modal bootstrap. Lorsque modal est ouvert, l'opacité du contenu d'arrière-plan n'est pas modifiée par défaut. J'ai essayé de changer en utilisant js 

function showModal() {
document.getElementById("pageContent").style.opacity = "0.5";

}

Cela fonctionne, mais chaque fois que modal est fermé, le style d'opacité reste toujours pour la pageContent. Mais, je suis sûr que ce n'est pas la bonne façon de faire. Toute aide appréciée. Merci . Le bouton HTML qui ouvre Modal est

<button class="btn glossy-clear" data-toggle="modal" data-target="#modal-display" onclick="showModal()">Clear</button>

Code modal est 

 <div class="modal fade" id="modal-display">
   <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title">Search results</h4>
     </div>
    <div class="modal-body"> 
      <div class="container">
        <div class="row">
          <div class="col-md-5">Hello</div>
          <div class="col-md-5">i!!!!</div>
         </div>
      </div>
     </div>
  </div>
 </div>
</div>

MODIFIER:

modal-backdrop div

javascriptcsstwitter-bootstrap
32
Bhargavi

Je suppose que vous souhaitez définir l'opacité de l'arrière-plan modal ...

Définir l'opacité via CSS

.modal-backdrop
{
    opacity:0.5 !important;
}

!important empêche l'opacité d'être écrasée - en particulier de Bootstrap dans ce contexte.

70
Hemant

Vous pouvez remplacer l'opacité de l'arrière-plan modal dans votre feuille de style [prenez note de la classe .in]

.modal-backdrop.in {
    opacity: 0.9;
}

http://jsfiddle.net/ThisIsMarkSantiago/r0gwn005/1/

21
ThisIsMarkSantiago

vous pouvez utiliser bootstrap events :: as

//when modal opens
$('#yourModal').on('shown.bs.modal', function (e) {
  $("#pageContent").css({ opacity: 0.5 });
})

//when modal closes
$('#yourModal').on('hidden.bs.modal', function (e) {
  $("#pageContent").css({ opacity: 1 });
})
9
Sudhir Bastakoti

Le problème avec la substitution à l'aide de !important est que vous perdrez l'effet fade in effect .

Donc, la meilleure astuce pour changer l'opacité de l'arrière-plan modal sans rompre l'effet de fondu et sans avoir à utiliser l'impudique !important est d'utiliser ceci:

.modal-backdrop{
  opacity:0; transition:opacity .2s;
}
.modal-backdrop.in{
  opacity:.7;
}

@sass 

.modal-backdrop{
  opacity:0; transition:opacity .2s;
  &.in{opacity:.7;}
}

Simple et propre.

4
biiwop

Régler simplement la hauteur à 100% ne sera pas la solution si vous avez une page d’arrière-plan dont la hauteur dépasse celle du navigateur.

Ajoutant à la réponse de Bhargavi, c'est la solution lorsque vous avez une page à défilement en arrière-plan.

.modal-backdrop.in
{
    opacity:0.5 !important;
    position:fixed;// This makes it cover the entire scrollable page, not just browser height
    height:100%;
}
2
SoulRayder

Si vous utilisez la version less pour compiler Bootstrap, modify @ modal-backdrop-opacity dans vos variables remplace le fichier $ modal-backdrop-opacity pour scss.

1
Jonathan Cohlmeyer

Juste au cas où quelqu'un utiliserait Bootstrap 4. Il semble que nous ne pouvons plus utiliser .modal-backdrop.in, mais nous devons maintenant utiliser .modal-backdrop.show. Effet de fondu préservé.

.modal-backdrop.show {
    opacity: 0.7;
}
1
Thomas Jensen

Après une journée difficile, j’ai compris comment régler la hauteur: 100% de la classe .modal-backdrop.in. hauteur: opacité 100% faite pour afficher la page entière.

1
Bhargavi

utiliser ce code

$("#your_modal_id").on("shown.bs.modal", function(){
      $('.modal-backdrop.in').css('opacity', '0.9');
});

0
Vitalya Litvinov

Ce qui a fonctionné pour moi, j'ai effacé l'opacité dans .modal.backdrop.in

.modal-backdrop.in{
    filter:alpha(opacity=50);
    opacity:.5
    }

changez le en

.modal-backdrop.in{
   }
0
Deepali

Ajouter! Important à .modal-backdrop gâchera la transition sur bootstrap modal

J'ai réussi à modifier l'arrière-plan modal de la superposition par édition directe dans bootstrap.min.css . Ceux qui utilisent localement CSS d'amorçage (sans utiliser de CDN) peuvent modifier la valeur de couleur de fond de .modal-backdrop class.

Si vous souhaitez modifier l'opacité de superposition modale de bootstrap 4, recherchez cette classe .modal-backdrop.show et remplacez l'opacité par la valeur dont vous avez besoin.

Si vous souhaitez modifier le temps de transition de la superposition, ajoutez une transition à .modal-backdrop.fade class

Si vous voulez changer le temps de transition pour les objets modaux, changez les valeurs de transition dans .modal.fade .modal-dialog class

0
Shahas Nizar