<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>
Zgaduję, że przechowywałbym zawartość formularza w funkcji javascript ...
Jak zawrzeć formularz w wyskakującym okienku bootstrap?
javascript
jquery
twitter-bootstrap
twitter-bootstrap-3
popover
user1438003
źródło
źródło
Umieściłbym swój formularz w znaczniku, a nie w jakimś tagu danych. Oto jak to mogłoby działać:
Kod JS:
Znaczniki HTML:
Próbny
Podejścia alternatywne:
Edytowalne
Możesz rzucić okiem na X-Editable . Biblioteka, która umożliwia tworzenie edytowalnych elementów na stronie w oparciu o popover.
Webcomponents
Mike Costello wydał Bootstrap Web Components . Ta sprytna biblioteka zawiera komponent Popovers, który pozwala osadzić formularz jako znacznik:
Próbny
źródło
data-title="Some Title"
w<a id="myID">
tagu, ponieważ nie mam dodatkowego div ...trigger
opcji. (trigger: 'focus'
)źródło
jak to Działające demo http://jsfiddle.net/7e2XU/21/show/# * Aktualizacja: http://jsfiddle.net/kz5kjmbt/
Kod JavaScript:
Zrzut ekranu
źródło
:)
Możesz załadować formularz z ukrytego
div
elementu za pomocąhidden
klasy dostarczonej przez Bootstrap .JavaScript:
źródło
$(...).parent().html()
z$(...).clone()
,)Lub spróbuj tego
Drugi, zawierający drugą ukrytą zawartość div do przechowywania formularza działającego i testującego na fiddle http://jsfiddle.net/7e2XU/21/
źródło
Kompletne rozwiązanie dla każdego, kto może tego potrzebować. Jak dotąd korzystałem z niego z dobrymi wynikami
JS:
HTML:
CSS:
źródło
Dużo pracuję na WordPressie, więc używam PHP.
Moja metoda polega na zawarciu mojego kodu HTML w zmiennej PHP, a następnie wyświetleniu tej zmiennej w formacie
data-content
.wraz z
źródło