web-dev-qa-db-fra.com

Bootstrap toile de fond modale = 'statique' ne fonctionne pas

Tout d'abord, j'ouvre mon modal en utilisant ceci:

$('#myModal').modal('show');

Ensuite, dans une autre situation, j'ai besoin que ce même modal ne se ferme pas en appuyant sur ESC/en cliquant à l'extérieur, alors j'utilise ceci:

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false
})

Mais une fois que j'ouvre mon modal par la première méthode, la seconde ne fonctionne pas. Des indices?

Comment puis-je forcer le commutateur de valeur backdrop à fonctionner?

twitter-bootstrap-3bootstrap-modal
13
João Paulo

J'ai trouvé une solution de contournement pour ce problème.

Une fois que le modal a été caché bootstrap les données restent toujours dessus. Pour éviter cela, j'ai eu ce qui suit:

$('#myModal').modal('show'); //display something
//...

// if you don't want to lose the reference to previous backdrop
$('#myModal').modal('hide'); 
$('#myModal').data('bs.modal',null); // this clears the BS modal data
//...

// now works as you would expect
$('#myModal').modal({backdrop:'static', keyboard:false});
15
Daniele Piccioni

Similaire à Daniele Piccioni mais un peu plus concis:

$('#myModal').modal({backdrop: true, keyboard: false, show: true});
$('#myModal').data('bs.modal').options.backdrop = 'static';

C'est pour Bootstrap 3.+

Voir aussi: Modifier Bootstrap option modale une fois qu'elle existe déjà

6
jollyGreen

J'ai eu le même problème avec Bootstrap 4.1.1 et cela n'a fonctionné que lorsque j'ai ajouté les attributs de données au html

<div class="modal fade show" id="myModal" tabindex="-1" role="dialog"
  style="display: block;" data-keyboard="false" data-backdrop="static">
...
3
Fernando Vieira

Il existe deux façons de gérer cela:

1) Vous pouvez ajouter directement les attributs de données dans le HTML -

<div class="modal fade show" id="myModal" tabindex="-1" role="dialog"
style="display: block;" data-keyboard="false" data-backdrop="static">

2) Vous pouvez utiliser JQuery (For Bootstrap V4) -

$("#myModal").data('bs.modal')._config.backdrop = 'static';

pour Bootstrap V3 -

$('#myModal').data('bs.modal').options.backdrop = 'static';
1
Parikshit Sarkar

Je voulais désactiver la fermeture d'un modal pendant qu'une requête AJAX se terminait.

@ jollyGreen m'a fait avancer dans la bonne direction, mais dans bootstrap 4 , la seule façon dont je pouvais le faire de manière pragmatique après la modal a déjà été montré était comme ceci:

$("#myModal").data('bs.modal')._config.backdrop = 'static';

C'est-à-dire qu'entre v3 et v4 ils semblent avoir changé la propriété options de bs.modal objet de données à _config.

0
DazBaldwin