Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][PHP]Okna modalne w Bootstrap
Forum PHP.pl > Forum > Przedszkole
altar
Witam, wlasciwie nie wiem czy wybralem odpowiedni dzial, bo pytanie chcialbym zadac dotyczace PHP, ale moze bardziej Bootstrap'a.

Chodzi o okna modalne. Chcialbym w jednym z nich osadzic formularz, ktory przyjmowalby dane od uzytkownika i zapisywal do $_POST, po kliknieciu w przycisk "Send" okno modalne ma sie zamknac a tablica $_POST ma byc wypelniona.
Problem polega na tym ze przyciski okna modalnego nie maja zadnego polaczenia z formularzem (albo nie wiem ze maja), wiec musze w jakis sposob w footerze okna modalnego wstawic <input type="button"... z formularza.
Wiec zrobilem taka przeplatanke tagow </form> i </div>
Czy taka przeplatanka jest dopuszczalna?
A moze jest zupelnie inna opcja rozwiazania tego problemu.

  1. <div class="modal fade" id="myModal">
  2. <div class="modal-dialog">
  3. <div class="modal-content">
  4. <div class="modal-header">
  5. <h1 class="modal-title">Add new task</h1>
  6. </div>
  7.  
  8. <div class="modal-body">
  9. <p>Fill form below</p>
  10. <form action="" method="post">
  11. Login: <input type="text" name="login">
  12. Pass: <input type="password" name="pass">
  13. </div><!-- tutaj zamykam diva klasy "modal-body", ale form jest caly czas otwarty-->
  14.  
  15. <div class="modal-footer">
  16. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  17. <input type="submit" value="Send" class="btn btn-primary"><!-- tutaj wstawilem button z formularza-->
  18. </form><!-- no i tutaj dopiero zamykam formularz, a ponizej nastepne divy-->
  19. </div>
  20. </div>
  21. </div>
  22. </div>
  23.  
  24.  
by_ikar
A dlaczego miałoby to być nie dopuszczalne? Poprostu przesuń trochę tego form'a:

  1. <div class="modal fade" id="myModal">
  2. <div class="modal-dialog">
  3. <div class="modal-content">
  4. <div class="modal-header">
  5. <h1 class="modal-title">Add new task</h1>
  6. </div>
  7. <form action="" method="post">
  8. <div class="modal-body">
  9. <p>Fill form below</p>
  10. Login: <input type="text" name="login">
  11. Pass: <input type="password" name="pass">
  12. </div><!-- tutaj zamykam diva klasy "modal-body", ale form jest caly czas otwarty-->
  13. <div class="modal-footer">
  14. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  15. <button type="submit" class="btn btn-primary">Send</button><!-- tutaj wstawilem button z formularza-->
  16. </div>
  17. </form><!-- no i tutaj dopiero zamykam formularz, a ponizej nastepne divy-->
  18. </div>
  19. </div>
  20. </div>
altar
no tak, teraz wyglada to lepiej, dzieki smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.