Twitter Bootstrap Modal

Submitted by: 
Language: 
Visitors have accessed this post 4584 times.

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>
  6.  
  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>
  12.  
  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>
  26.  
  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 SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

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

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.