How to use JS to change content in bootstrap modal

Question

I am using twitter bootstrap's modal to make a pop up screen for login.

This is the following code that shows the pop-up form when LOGIN is clicked.

<section id="modal-login-form">
        <div class="modal fade" id="m-login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <p><h4 class="modal-title" id="myModalLabel">Register</h4></p>
                        <button id="login" type="button" class="btn btn-login">Login</button>
                        <button id="register" type="button" class="btn btn-register">Register</button>
                    </div>
                    <div class="modal-body">
                        <p>Username<br>
                        <input class="user" type="text">
                        </p>
                        <p>Password<br>
                        <input class="pass" type="password">
                        </p>
                        <p>Package<br>
                        <input class="package" type="text">
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-signup">Sign up</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

The above codes produces a caption "Register". Two buttons Login and Register below. I am trying to make the two buttons dynamic . What I am thinking here is that when Login is clicked, the modal will stay there but the body will change dynamically to the login form. When register is clicked, the body will change dynamically to the register form.

I believe there is javascript involve in this but I can't think of any way to work around this. Please enlighten me. Thanks a lot!

Answer 1

You should use jquery load() method.

Keep the HTML code for login and register in separate files,let me assume it's login.html and register.html .

• Assign an id to the modal-body: <div class="modal-body" id="modal">

• JS code to load the login html in the modal div:

   function load_login(){ $( "#modal" ).load( "login.html" ); } 

• And add an onclick event to the button to load the function:

   <button id="login" onclick="load_login()" type="button" class="btn btn-login">Login</button> 

You could do the same for register.