<div class="container">
<div class="row" style="padding-top: 240px;">
<a href="#" class="btn btn-large btn-primary" rel="popover"
data-content="<form><input type="text"/></form>"
data-placement="top" data-original-title="Fill in form">Open form</a>
</div>
</div>
Je suppose que je stockerais le contenu du formulaire dans une fonction javascript ...
Comment puis-je contenir un formulaire dans un popover bootstrap?
javascript
jquery
twitter-bootstrap
twitter-bootstrap-3
popover
user1438003
la source
la source
Je mettrais mon formulaire dans le balisage et non dans une balise de données. Voici comment cela pourrait fonctionner:
Code JS:
Balisage HTML:
Démo
Approches alternatives:
X-modifiable
Vous voudrez peut-être jeter un œil à X-Editable . Une bibliothèque qui vous permet de créer des éléments modifiables sur votre page en fonction de popovers.
Composants Web
Mike Costello a publié les composants Web Bootstrap . Cette bibliothèque astucieuse a un composant Popovers qui vous permet d'incorporer le formulaire en tant que balisage:
Démo
la source
data-title="Some Title"
dans le<a id="myID">
tag pour ne pas avoir de div supplémentaire ...trigger
option. (trigger: 'focus'
)la source
comme cette Démo de travail http://jsfiddle.net/7e2XU/21/show/# * Mise à jour: http://jsfiddle.net/kz5kjmbt/
Code JavaScript:
Capture d'écran
la source
:)
Vous pouvez charger le formulaire à partir d'un
div
élément masqué avec lahidden
classe fournie par Bootstrap .JavaScript:
la source
$(...).parent().html()
par$(...).clone()
;)Ou essayez celui-ci
Deuxième comprenant un deuxième contenu div caché pour maintenir le formulaire en marche et le tester sur le violon http://jsfiddle.net/7e2XU/21/
la source
Une solution complète pour tous ceux qui pourraient en avoir besoin, je l'ai utilisée avec de bons résultats jusqu'à présent
JS:
HTML:
CSS:
la source
Je travaille beaucoup sur WordPress donc j'utilise PHP.
Ma méthode consiste à contenir mon HTML dans une variable PHP, puis à faire écho à la variable dans
data-content
.de même que
la source