web-dev-qa-db-fra.com

Comment supprimer l'incrustation modale bootstrap?

Comment supprimer la superposition modale bootstrap pour un modal particulier Lorsque modal apparaît, l’arrière-plan est de couleur noire avec une certaine opacité. Y at-il une option pour supprimer ces éléments ...

twitter-bootstrapbootstrap-modal
5
Manigandaprabhu

Ajoutez l'option data-backdrop="false" en tant qu'attribut au bouton qui ouvre le modal.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="false">
  Launch demo modal
</button>

Voir options modales

18
Mario Shtika

J'ai pu utiliser l'extrait de code suivant pour masquer la superposition du modèle en masquant simplement le modal lorsque l'événement shown.bs.modal est déclenché.

<script type="text/javascript">
  $('#modal-id').on('shown.bs.modal', function () {
      $(".modal-backdrop.in").hide();
   })
</script>
5
Manigandaprabhu

Si vous traitez avec bootstrap modal via jquery, il est préférable d’utiliser le code ci-dessous dans votre fonction de rappel d’événement.

$('.modal-backdrop').remove();
1
vitthal

Vous pouvez également définir 

.modal-backdrop {
   background-color: transparent;
}

dans votre css et votre bootstrap, la fonction "extérieur" fonctionnera toujours. 

1
Duka

L'arrière-plan est déclenché avec la classe suivante: .modal-backdrop avec une classe .in supplémentaire pour l'opacité.

Valeurs par défaut (éditez si nécessaire):

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}
.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}
1
Aibrean

Si vous utilisez la fonction click en javascript (jquery). Vous utilisez:

$("#myBtn2").click(function(){
    $("#myModal2").modal({backdrop: false});
});
0
TungHarry