javascript - How to use JS to change content in bootstrap modal -

i using twitter bootstrap's modal make pop screen login.

this following code shows pop-up form when login 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 caption "register". 2 buttons login , register below. trying make two buttons dynamic. thinking here when login clicked, modal stay there body change dynamically login form. when register clicked, body change dynamically register form.

i believe there javascript involve in can't think of way work around this. please enlighten me. lot!

you should use jquery load() method.

keep html code login , register in separate files,let me assume it's login.html , register.html .

• assign id modal-body:<div class="modal-body" id="modal">

• js code load login html in modal div:

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

• and add onclick event button load function:

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

you same register.