I was creating Sign Up and Login Modals whereby users could toggle between them as they wish. Both of the contents are remote and they get loaded into the same modal, called #myModal.

Bootstrap has a load remote content using the href like this example. However, in my project, I wanted to use the same modal but I would like different sized modal (modal-lg or modal-sm or perhaps one of my own size) to open depending on what the user clicked on. So loading content into modal-content is not going to work for me.

Calling Remote Content

1. First start with creating the Bootstrap modals (I called mine login.php and sign up.php) but with a small variation – remove the first opening div tag along with the closing div tag at the bottom. So your code will look like this:

   <div class="modal-dialog">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
               <h4 class="modal-title">Modal title</h4>
           </div>
           <div class="modal-body">
               <p>One fine body&hellip;</p>
           </div>
           <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
               <button type="button" class="btn btn-primary">Save changes</button>
           </div>
       </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   

2. Create a navigation bar (if you haven’t already) that will open the modals.
   

   <a href="" data-toggle="modal" data-target="#myModal" id="ModalSignUp">Sign Up</a><a href="" data-toggle="modal" data-target="#myModal" id="ModalLogin">Log In</a>

3. Next, write the container and the script that would call the remote files/content. This code can sit inside whichever file that the modal will appear. Since these modals are called by the links on the navigation bar, it sits pretty much in all the pages.

   <!--this creates a div to hold the remote content, which also is the first div tag from Bootstrap's modal code-->
   <div class="modal fade" id="myModal" tabindex="-1" role="dialog"></div>
   <!--script to load url with the remote content-->
   <script>
       $('#ModalSignUp').click(function(){
           $('#myModal').load('./_include-modal/signup.php');
       });
       $('#ModalLogin').click(function(){
           $('#myModal').load('./_include-modal/login.php');
       });
   </script>

4. Now when you click on the links on the navigation bar, it should load the remote content. The next step will be to link from login.php to signup.php and vice versa.
   
5. Using the login.php file as an example, essentially what needs to happen when you click on “Sign up” is 1)close the current modal 2)clear the data on #myModal, and 3)load the new content. To do this, we put the following code in the login.php file:

   <a href="" data-toggle="modal" data-target="#myModal" id="ModalSignUpNew">Sign Up</a>
   

   and the script

   <script>
       $('#ModalSignUpNew').click(function(){
           $('#myModal').removeClass('fade'); //using this eliminates the extra pixels created when opening new modal 
           $('#myModal').modal('hide'); //close the current modal
           $('#myModal').removeData('bs.modal'); //clear the content the current modal
           $('#myModal').load('./_include-modal/signup.php'); //loads the new content
       });
   </script>

Have something better? Share your thoughts!