Skip to main content

Twitter Bootstrap Modal


In this source code, you will learn on how to create a modal form using Bootstrap framework.

Modal form is useful if you want to create a login page that popups when you click the sign in button or link without reloading the page.

For more questions email me at [email protected] or just visit the twitter bootstrap website.

Hope you like this code.

Thank you.

Sample code:

  1. <?php include('header.php'); ?>
  2. <div class="row-fluid">
  3. <div class="span12">
  4. <div class="container"> <br>
  5. <br>
  7. <!-- Button to trigger modal -->
  8. <a class="btn btn-primary btn-large" href="#myModal" data-toggle="modal">Click Here To View Modal</a> <br>
  9. <br>
  10. <br>
  11. <a href="#myModal1" data-toggle="modal">Click Here To View Modal</a>
  13. <!-- Modal -->
  14. <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  15. <div class="modal-header">
  16. <h3 id="myModalLabel">Modal header</h3>
  17. </div>
  18. <div class="modal-body">
  19. <p>One fine body</p>
  20. </div>
  21. <div class="modal-footer">
  22. <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  23. <button class="btn btn-primary">Save changes</button>
  24. </div>
  25. </div>
  27. <!-- link Modal -->
  28. <div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  29. <div class="modal-header">
  30. <h3 id="myModalLabel">Modal header</h3>
  31. </div>
  32. <div class="modal-body">
  33. <p>Another modal</p>
  34. </div>
  35. <div class="modal-footer">
  36. <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  37. <button class="btn btn-primary">Save changes</button>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. </body>
  45. </html>

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.


1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.