Modals Bootstrap: comment ouvrir avec onClick=""
Je dois pouvoir ouvrir une fenêtre modale de démarrage Twitter en utilisant la fonction onClick="" ou une fonction similaire. Juste besoin du code pour aller dans le onClick="". J'essaie de faire un clic div pour ouvrir le modal.
Extraits De Code:
CODE Div:
<div class="span4 proj-div" onClick="open('GSCCModal');">
CODE Div Modal:
<div id="GSCCModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Javascript:
function open(x){
$(x).modal('show');
}
4 réponses
Vous n'avez pas besoin d'un onclick. En supposant que vous utilisez Bootstrap 3 Bootstrap 3 Documentation
<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">× </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, vous devez suivre le balisage ici: http://getbootstrap.com/2.3.2/javascript.html#modals
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é, donc je voulais partager comment je l'ai utilisé.
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 à partir d'un élément tel qu'un bouton:
<button type="button" onClick="javascript:showMyModalSetTitle('Some Title', 'Some body txt')"> Click Me! </button>
Une fonction JavaScript doit d'abord être faite qui contient ce que vous voulez faire:
function print() { console.log("Hello World!") }
Et puis cette fonction doit être appelée dans la méthode onClick depuis l'intérieur d'un élément:
<a onClick="print()"> ... </a>
Vous pouvez en savoir plus sur les interactions modales directement à partir de la documentation Bootstrap 3 trouvée ici: http://getbootstrap.com/javascript/#modals
VOTRE liaison modale est également incorrecte. Cela devrait être quelque chose comme ceci, où "myModal" = ID de l'élément:
$('#myModal').modal(options)
Dans les autres mots, si vous voulez vraiment garder ce que vous avez déjà, mettez un " # " devant GSCCModal et voyez si cela fonctionne.
, Il n'est pas très sage d'avoir un onClick lié à un élément div; quelque chose comme un bouton serait plus approprié.
Espérons que cela aide!
J'ai eu le même problème, après beaucoup de recherches, j'ai finalement construit une fonction js pour créer des modals dynamiquement en fonction de mes besoins. En utilisant cette fonction, vous pouvez créer des popups dans une ligne telle 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.
Trouver sur https://github.com/aybhalala/puymodals Pour la démo, allez à la http://pateladitya.com/puymodals/