web-dev-qa-db-fra.com

Modules d'amorçage: comment ouvrir avec onClick = ""

Je dois pouvoir ouvrir une fenêtre modale d'amorçage Twitter à l'aide de la fonction onClick="" ou d'une fonction similaire. Juste besoin du code pour aller dans le onClick="". J'essaie de créer une variable div cliquable pour ouvrir le modal.

Extraits de code:

Code Div: 

<div class="span4 proj-div" onClick="open('GSCCModal');">

Code de la division modale: 

<div id="GSCCModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Javascript: 

function open(x){
    $(x).modal('show');
}
javascripttwitter-bootstrapmodal-dialog
24
Snappawapa

Vous n'avez pas besoin d'un onclick. En supposant que vous utilisez Bootstrap 3 Documentation Bootstrap 3

<div class="span4 proj-div" data-toggle="modal" data-target="#GSCCModal">Clickable content, graphics, whatever</div>

<div id="GSCCModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;  </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Si vous utilisez Bootstrap 2, suivez le code ici: http://getbootstrap.com/2.3.2/javascript.html#modals

36
BriAnna

Je cherchais l'option onClick pour définir le titre et le corps du modal en fonction de l'élément dans une liste. La réponse de T145 a beaucoup aidé, alors je voulais partager comment je l'avais utilisée. 

Assurez-vous que la balise contenant la fonction JavaScript est de type text/javascript pour éviter les conflits:

<script type="text/javascript"> function showMyModalSetTitle(myTitle, myBodyHtml) {

   /*
    * '#myModayTitle' and '#myModalBody' refer to the 'id' of the HTML tags in
    * the modal HTML code that hold the title and body respectively. These id's
    * can be named anything, just make sure they are added as necessary.
    *
    */

   $('#myModalTitle').html(myTitle);
   $('#myModalBody').html(myBodyHtml);

   $('#myModal').modal('show');
}</script>

Cette fonction peut maintenant être appelée dans la méthode onClick depuis un élément tel qu'un bouton:

<button type="button" onClick="javascript:showMyModalSetTitle('Some Title', 'Some body txt')"> Click Me! </button>
11
Ash

Vous devez d’abord créer une fonction JavaScript contenant ce que vous voulez faire:

function print() { console.log("Hello World!") }

et ensuite cette fonction doit être appelée dans la méthode onClick à partir d'un élément:

<a onClick="print()"> ... </a>

Vous pouvez en apprendre plus sur les interactions modales directement dans la documentation Bootstrap 3, disponible ici: http://getbootstrap.com/javascript/#modals

Votre liaison modale est également incorrecte. Ce devrait être quelque chose comme ceci, où "myModal" = ID d'élément:

$('#myModal').modal(options)

En d'autres termes, si vous voulez vraiment conserver ce que vous avez déjà, mettez un "#" devant GSCCModal et voyez si cela fonctionne.

Il n’est pas non plus sage d’avoir un onClick lié à un élément div; quelque chose comme un bouton serait plus approprié.

J'espère que cela t'aides!

0
T145

J'ai eu le même problème, après des recherches approfondies, j'ai finalement créé une fonction js pour créer des modaux de manière dynamique en fonction de mes besoins. En utilisant cette fonction, vous pouvez créer des popups sur une ligne tels que:

puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.'})

Ou vous pouvez utiliser d'autres fonctionnalités complexes telles que les iframes, les popups vidéo, etc.

Trouvez-le sur https://github.com/aybhalala/puymodals Pour une démonstration, visitez http://pateladitya.com/puymodals/

0
Adi.P