La transmission des données à un modal bootstrap
J'ai un couple de liens hypertextes, qui ont chacun un ID relié. Lorsque je clique sur ce lien, je veux ouvrir un modal ( http://twitter.github.com/bootstrap/javascript.html#modals ), et de transmettre ce code à l'modal. J'ai cherché sur google, mais je ne pouvais pas trouver quelque chose qui pourrait m'aider.
C'est le code:
<a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a>
Qui doit s'ouvrir:
<div class="modal hide" id="addBookDialog">
<div class="modal-body">
<input type="hidden" name="bookId" id="bookId" value=""/>
</div>
</div>
Avec ce morceau de code:
$(document).ready(function () {
$(".open-AddBookDialog").click(function () {
$('#bookId').val($(this).data('id'));
$('#addBookDialog').modal('show');
});
});
Cependant, lorsque je clique sur le lien hypertexte, il ne se passe rien. Quand je donne le lien hypertexte <a href="#addBookDialog" ...>
, la modale s'ouvre très bien, mais il ne contient pas toutes les données.
J'ai suivi cet exemple: Comment transmettre des valeurs des arguments à modale.show() dans le Bootstrap
(et j'ai aussi essayé ceci: Comment définir la valeur d'entrée dans un dialogue modale?)
Vous devez vous connecter pour publier un commentaire.
Je pense que vous pouvez faire ce travail à l'aide de jQuery .sur gestionnaire d'événement.
Ici un violon, vous pouvez tester; assurez-vous simplement d'élargir le cadre HTML dans le violon comme beaucoup que possible de sorte que vous pouvez afficher le modal.
http://jsfiddle.net/Au9tc/605/
HTML
JAVASCRIPT
modal('show')
nécessaire? Semble que ledata-toggle="modal"
sur les liens de prendre soin de cela.data-toggle="modal"
la$(...).modal('show')
appel superflu. jsfiddle.net/55ZWe/1data-toggle
l'ordre les événements feu est à gauche du navigateur et n'est pas cohérente. Beaucoup mieux d'appeler le modal via JS.$(this).data('id');
a pas de prix sur son propre! Je n'avais aucune idée que vous pourriez obtenir les données attribs avec qui. Je suis amoureuse de s'amorce plus chaque jour! =Pdata-
attributs. Pour l'exemple ci-dessus, supposons que vous aviez déjà le nom de l'auteur: vous pouvez vous servir dedata-author="John Smith"
de la même façon, le livre id est utilisé. Sinon, si vous n'avez pas les données déjà disponibles, il peut faire plus de sens de faire unajax
appel lors de l'ouverture du modal. C'est difficile à dire sans en savoir plus sur la page et les données que vous avez à traiter..click
gestionnaire d'événement de la valeur, passés et rien ne se passe?.click
est sur la dynamique, l'ajout d'un élément...Ici est une façon plus propre de le faire si vous utilisez Bootstrap 3.2.0.
Lien HTML
Modal JavaScript
http://jsfiddle.net/k7FC2/
e
. Cette ligne trouve uneinput
avec le nombookId
et définit la valeur sur elle.$(this)
avec$(e.relatedTarget)
fonctionne très bienVoici comment j'ai mis en œuvre ce travail de @mg1075 du code. Je voulais un peu plus de code générique afin de ne pas avoir à assigner des classes modales déclencher des liens/boutons:
Testé dans Twitter Bootstrap 3.0.3.
HTML
JAVASCRIPT
!! $(this).data('id')
au lieu detypeof $(this).data('id') !== 'undefined'
Si vous êtes sur bootstrap 3+, ce peut être raccourcie un peu plus loin, si l'utilisation de Jquery.
HTML
JQUERY
Votre code aurait travaillé avec la bonne modale d'une structure html.
JS:
HTML:
Dans le Bootstrap 4.3 l'utilisation de code à partir d'extrait de code ci-dessous - plus d' ici
JS:
CSS:
HTML:
Vous pouvez essayer simpleBootstrapDialog. Ici, vous pouvez passer le titre, le message, les options de rappel pour l'annuler et de le soumettre etc...