0
votes

Comment afficher et fermer le message Modal lorsque vous planifiez des boutons

Je voudrais afficher une boîte de description de texte lorsque je survole sur le bouton et fermez-la lorsque vous n'avez pas plané. Pour le moment, lorsque mon bouton est planifié, la zone de texte s'affiche, mais je dois cliquer sur l'écran pour la fermer. Lorsque j'essaie d'utiliser plusieurs boutons pour afficher différentes boîtes de message, tous les modaux sont ouverts et je dois cliquer sur l'écran à plusieurs reprises pour la fermer. Comment puis-je afficher la boîte de message sur la survolte et l'undaceplay lorsque la souris n'est pas planifiée. Comment cela peut-il être atteint pour plusieurs boutons?

ci-dessous est ce que j'ai jusqu'à présent: p>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<button class="btn login btn-primary" data-toggle="modal" data-target="#product1" id="test1">Test</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      This text box shown when mouse hover over the button
    </div>
  </div>
</div>

javascript jquery html twitter-bootstrap

0 commentaires

3 Réponses :

0
votes

Nouvelle réponse:

"Hover" forte> La méthode accepte le deuxième argument comme gestionnaire de gestionnaire. p>

afin que vous puissiez faire quelque chose comme ceci: P>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

1 commentaires

Votre solution ne fonctionne pas tout à fait. Lorsque je déplace la souris sur le bouton, le texte ne disparaît pas. De plus, si je veux utiliser plusieurs boutons, que dois-je faire. Pour le moment, il ouvre tous les modaux quand je le fais. Et je dois cliquer sur l'écran plusieurs fois pour les fermer tous.

1
votes

Premier problème majeur: lorsque Bootstrap affiche ce modal, il écrase tout sur la page Web, y compris le bouton de test, ce qui le rend hors de portée d'une mousette (le bas de la boîte de dialogue modale est sur le bouton)

Ceci est résolu en enchérissant sur l'ordre des couches d'affichage en plaçant un CSS de Z-Index Z (I. i Mettez 8000 et cela ne fonctionne également que si l'élément utilise un positionnement) En conséquence, ce n'est plus une boîte de dialogue modale réelle et le clic sur le bouton de test peut être déclenché, ce qui est contraire à l'esprit d'utilisation d'une boîte de dialogue modale. P>

La DOC BS4 sur le sujet = > https://getbootstrap.com/docs/4.0/components/ Modal / # Attributs via-Data-Data-Attributs P>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>

 <button class="btn login btn-primary BtModals" data-modal_id="Modal-t1"  data-toggle="modal" data-target="#product1" >Test 1</button>

  <button class="btn login btn-primary BtModals" data-modal_id="Modal-t2" data-toggle="modal" data-target="#product1" >Test 2</button>


  <div id="Modal-t1" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      This text box shown when mouse hover over the button  Test 1
    </div>
  </div>
</div>

<div id="Modal-t2" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      This text box shown when mouse hover over the button  Test 2
    </div>
  </div>
</div>

4 commentaires

Merci @mrj, cela fonctionne bien. Mais il y a un problème, lorsque j'essaie d'en faire plusieurs d'entre eux et de donner une description pour chacun et survolez sur le bouton. Il fusionne les textes de tout contenu modal. De plus, je ne peux pas utiliser le même identifiant ID = "Test1" afin que je dois modifier cela pour chaque bouton. Cela signifie-t-il que j'ai besoin de faire un script pour chacun?

Non, vous pouvez utiliser une classe à la place de l'ID et utiliser l'attribut de données pour sélectionner le modal concerné sur son identifiant.

J'ai fait le changement pour des multi-boutons / modaux sur cette réponse

Merci @MRJ, cela semble bien fonctionner maintenant. Merci pour toute votre aide, c'est bien apprécié.

0
votes

Vous pouvez y parvenir à CSS en définissant un attribut de données avec le «texte de navigation» dans le code HTML pour chaque bouton. S'il y a trop de boutons pour le faire manuellement, ou si elles changent de manière dynamique, vous pouvez en faire la boucle dans JS et utiliser .setattribute ("Data-Tip", "TIP_Content") P>. Voici un exemple de HMTL et CSS: P>

button:hover:after {
    content: attr(data-tip);
    color: red;   
    display: block;
    position: absolute;
    top: 20%;
}

2 commentaires

Encore une fois, c'est comme Bootstrap Tooltip / Pullover, il l'écrit en 1 ligne. Cela ne convient pas au but. J'ai une liste de "produits" et j'essaie de fournir à chacun d'entre eux un bouton (voir plus) avec une zone de texte pour afficher la description du produit lorsque le bouton est planifié.

Pas sûr de comprendre ce que vous essayez d'atteindre alors? (@Nick - merci pour le format édition)