Form in modal is a trending tool for websites now a days. Like Bootstrap login/register form implemented in a modal to popup. I have seen designer making form markup wrong within modal and thus complaining for invalid markup in bootstrap or not firing a submit event properly either directly by button click or within their script related to popup.
If you are not using form in Bootstrap modal or want to create a responsive modal, read the linked article. There you can create a responsive non-bootstrap modal just using CSS, and animation is also included.
You can use the same modal to show directly on page as well as a modal too. To know how to do this, read article: http://fellowtuts.com/twitter-bootstrap/modal-popup-direct-page-content/
In this article, I will tell you how to setup a form in modal for Twitter Bootstrap framework. If we generally note, a button should always placed within form’s opening and closing tags. And see below what makes mistake. Don’t use the code block given, it’s just an example of invalid form markup in Bootstrap modal:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="ModalLabel">Title</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form> Misplaced form input in modal </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Button</button> </div> </form> </div> </div> </div> |
As you can see, I’m trying to keep the buttons located inside modal footer, to within form element. The form itself opened in modal body but incorrectly closed before modal content. All is used as not correct way.
If you’re using Yii framework, this article will tell you to correctly set Yii form and submit button in correct way.
Bootstrap Form in Modal or Popup
So what is needed? Oh! It’s simple. Edit
<div class="modal-content"> and write is as
<form class="modal-content"> . Change closing div to form accordingly as well and all done. Surprised? Yes it is. It’s the simplest and correct way to use Bootstrap form in modal. So our markup would look like:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <form class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="ModalLabel">Title</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <input /> <p>Correctly placed form input in modal body</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Button</button> </div> </form> </div> </div> |
Check here: Bootstrap 4 Mega Menu.
Here you see that all modal-header , modal-body and modal-footer classes are kept within form element and body of modal contain form inputs while modal footer has the buttons. This the correct way for form in popup.
So now you got putting Bootstrap form in modal and in correct way. Have question or feedback related to Bootstrap? Just drop a comment below.