web-dev-qa-db-fra.com

Champ de saisie de texte des blocs modaux Twitter Bootstrap

J'essaie d'utiliser un modal en tant que fenêtre d'aide contextuelle . Je règle l'arrière-plan sur "rien" . Lorsque le modal est ouvert (sans arrière-plan), les champs de saisie de la page "original" ne peuvent pas être mis au point.

Les autres types de saisie (case à cocher et bouton dans l'exemple) fonctionnent bien ...

Une idée ?

Mon code:

<div class="container">
<!-- Button to trigger modal -->
  <form>
      <label>Input</label>
      <input type="text" placeholder="Type something…">
      <label class="checkbox">
        <input type="checkbox">Checkbox
      </label>
      <button type="submit" class="btn">Submit</button>
  </form>

  <!-- Button to trigger modal -->
  <a href="#myModal" role="button" class="btn" data-toggle="modal">Open Help...</a>

  <!-- Modal -->
  <div id="myModal" class="modal hide" data-backdrop="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
      <p>One fine body…</p>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
</div>

Javascript simple pour rendre le popup glissable:

$('#myModal').draggable();

Tout ça sur JSFiddle ...

http://jsfiddle.net/Jxdd8/3/

twitter-bootstrapmodal-dialog
34
user966737

Cela ressemble à un modal n'est pas la bonne solution à votre problème ici.

Par définition, un dialogue modal ne devrait pas permettre à l'utilisateur d'interagir avec quoi que ce soit en dessous de lui.

Dans la conception de l'interface utilisateur, une fenêtre modale est une fenêtre enfant qui oblige les utilisateurs à interagir avec celle-ci avant de pouvoir revenir à l'exploitation l’application parente, empêchant ainsi le workflow sur le fichier fenêtre principale de l'application.

- http://fr.wikipedia.org/wiki/Modal_window

Cela étant dit, il existe un moyen de contourner le problème. Bootstrap configure un écouteur d'événement pour voler le focus de tout le reste, et c'est ce qui vous empêche d'éditer la saisie de texte. Les autres boutons fonctionnent car ils ne nécessitent pas de focus, mais uniquement un événement de clic.

Vous pouvez écouter l'événement "indiqué" déclenché par le modal d'amorçage et désactiver le programme d'écoute de focus défini.

$('#myModal').on('shown', function() {
    $(document).off('focusin.modal');
});

Et juste pour le plaisir: http://jsfiddle.net/Jxdd8/4/

50
Eric Freese

rappelez-vous que la réponse d'Eric Freese n'est plus valide si vous utilisez Twitter Bootstrap 3 - le nom de l'événement a changé, utilisez plutôt le code suivant:

$('#myModal').on('shown.bs.modal', function() {
    $(document).off('focusin.modal');
});
40
animativ

S'il vous plaît retirer:

tabindex="-1"

de

<div id="myModal" class="modal hide" data-backdrop="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Utilisez celui-ci à la place:

<div id="myModal" class="modal hide" data-backdrop="" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
5
oparam

*RÉSOLU

Si quelqu'un est toujours bloqué sur cette question, la solution est la suivante:

Après la classe div <div class="modal fade", insérez: style="display:none;" Ceci empêchera le modal de bloquer les champs et devrait résoudre le problème.

2
Niall Lonergan

La manière suivante peut résoudre ce problème pour Bootstrap v2.3.2, version 2013.3.1119.340 de Kendo UI Grid dans IE11.

le point est de supprimer la classe "in" de la classe de modal. Pas besoin d'utiliser "style = 'display: none;'" car cela causera étrangement l'interface utilisateur de Kendo Grid.

codes html avant fixés: 

  <div class="modal hide fade in" id="YourWindow" role="dialog">

codes html après avoir corrigé: 

  <div class="modal hide fade" id="YourWindow" role="dialog">
       <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>            
       </div>
       <div class="modal-body" >
          <div id="YourWindowBody">
          </div>
       </div>
       <div class="modal-footer">
          <button type="button" data-dismiss="modal">Close</button>      
       </div>
  </div>

en même temps, ajoutez la ligne suivante de JavaScript:

    $("#YourWindow").on('shown', function () {
        $(document).off('focusin.modal');
    });
1
ChinaHelloWorld

utilisez ce code fin de tout le code javascript:

$(document).on('focusin', function(e) {
    if ($(event.target).closest(".mce-window").length) {
        e.stopImmediatePropagation();
    }
});

jsfiddle

0
Reza Nadimi

La suite a fonctionné pour moi:

$('#myModal').on("show.bs.modal", (ev) => {
    $('#myModal').find(".modal-content").on("mousedown", (e) => {

                if ($(e.target).is("input")) {
                    //Fix for bootstrap modal being stealing focus from inputs like textbox
                    e.stopImmediatePropagation();
                }
            });
});
0
Faisal Mq

comme le disait Eric Freese, "un dialogue modal ne devrait par définition permettre à l'utilisateur d'interagir avec rien en dessous de lui." http://Twitter.github.com/bootstrap/javascript.html#popovers

0
mabdrabo

Pour moi, le problème était que j'utilisais jquery 3.2.1, alors je le change en 2.1.3, qui était utilisé sur une application précédente que nous avions développée et tout fonctionnait bien. Peut-être quelque chose avec les versions de compatibilité jquery et bootstrap. 

J'espère que ça aide

0
acubillo