Twitter Bootstrap Modal

Submitted by jkev on Thursday, May 16, 2013 - 10:57.

Language

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

Tags

Add new comment

About text formats
  • 43 views