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:

<?php include('header.php'); ?>
<body>
<div class="row-fluid">
        <div class="span12">
                <div class="container"> <br>
                        <br>
                        
                        <!-- Button to trigger modal --> 
                        <a class="btn btn-primary btn-large" href="#myModal" data-toggle="modal">Click Here To View Modal</a> <br>
                        <br>
                        <br>
                        <a  href="#myModal1" data-toggle="modal">Click Here To View Modal</a> 
                        
                        <!-- Modal -->
                        <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-header">
                                        <h3 id="myModalLabel">Modal header</h3>
                                </div>
                                <div class="modal-body">
                                        <p>One fine body</p>
                                </div>
                                <div class="modal-footer">
                                        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                                        <button class="btn btn-primary">Save changes</button>
                                </div>
                        </div>
                        
                        <!-- link Modal -->
                        <div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-header">
                                        <h3 id="myModalLabel">Modal header</h3>
                                </div>
                                <div class="modal-body">
                                        <p>Another modal</p>
                                </div>
                                <div class="modal-footer">
                                        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                                        <button class="btn btn-primary">Save changes</button>
                                </div>
                        </div>
                </div>
        </div>
</div>
</div>
</body>
</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

58 views