I created a bootstrap modal, I am looking for possible solution to make my modal content change dynamically.. here is my modal

<div class="modal fade" id="signupmodal">
      <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <h4>Sign up or log in</h4>
          </div>
          <div class="modal-body">
              <a class="btn btn-block btn-social btn-facebook btn-lg">
              <i class="fa fa-facebook"></i> Sign in with Facebook
              </a>
          <h4 style="text-align:center;"><b>OR</b></h4>
             <a class="btn btn-success btn-lg btn-block" data-toggle="modal" data-target="#loginmodal">LOG IN</a>
             <a type="button" class="btn btn-link btn-md" data-toggle="modal" >Create Account</a>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal"><b>Close</b></button>
          </div>
          </div><!--modalcontent-->
      </div><!--modaldialog-->
  </div><!--modalfade -->`

when i click the log in button i want to change my modal-body content to this login form

 <form>
    <div class="form-group">
       <label for="inputEmail">Email / Username</label>
       <input class = "form-control" type="email"       id="inputEmail"placeholder="Email">
     </div>
    <div class="form-group">
       <label for="inputPassword">Password</label>
       <input class = "form-control" type="password" id="inputPassword" placeholder="Password">
       <a type="button" class="btn btn-link btn-sm">Forgot password</a>
     </div>
    <div class="form-group">
        <a type="button" class="btn btn-info btn-md">Log in</a>
      </div>
  </form>

THANK YOU SO MUCH!

I created a bootstrap modal, I am looking for possible solution to make my modal content change dynamically.. here is my modal

<div class="modal fade" id="signupmodal">
      <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <h4>Sign up or log in</h4>
          </div>
          <div class="modal-body">
              <a class="btn btn-block btn-social btn-facebook btn-lg">
              <i class="fa fa-facebook"></i> Sign in with Facebook
              </a>
          <h4 style="text-align:center;"><b>OR</b></h4>
             <a class="btn btn-success btn-lg btn-block" data-toggle="modal" data-target="#loginmodal">LOG IN</a>
             <a type="button" class="btn btn-link btn-md" data-toggle="modal" >Create Account</a>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal"><b>Close</b></button>
          </div>
          </div><!--modalcontent-->
      </div><!--modaldialog-->
  </div><!--modalfade -->`

when i click the log in button i want to change my modal-body content to this login form

 <form>
    <div class="form-group">
       <label for="inputEmail">Email / Username</label>
       <input class = "form-control" type="email"       id="inputEmail"placeholder="Email">
     </div>
    <div class="form-group">
       <label for="inputPassword">Password</label>
       <input class = "form-control" type="password" id="inputPassword" placeholder="Password">
       <a type="button" class="btn btn-link btn-sm">Forgot password</a>
     </div>
    <div class="form-group">
        <a type="button" class="btn btn-info btn-md">Log in</a>
      </div>
  </form>

THANK YOU SO MUCH!

• javascript
• html
• css
• web
• bootstrap-modal

• You can always just hide the sections you don't wish to see at first with a hide class and then use js to add/remove the hide class as needed to show different bits of content. This is also assuming all content is already on the page somewhere.. – justDan Commented Dec 8, 2016 at 19:08

3 Answers 3

Just look at the code and you will know the solution .

Just remember that it is not necessary that things you don't see on browser can't be there. For example, in your case what you want to do is to click on login and code from some where else should be loaded to your modal-body div where in this case it is not necessary to do so rather then you can do what i have show in snippet.

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="modal-body">
  <div id="initial-content">
    <a class="btn btn-block btn-social btn-facebook btn-lg">
      <i class="fa fa-facebook"></i> Sign in with Facebook
    </a>
    <h4 style="text-align:center;"><b>OR</b></h4>
    <a class="btn btn-success btn-lg" onclick="$('#login-content').show();$('#initial-content').hide();">LOG IN</a>
    <a class="btn btn-success btn-lg" type="button" class="btn btn-link btn-md" data-toggle="modal">Create Account</a>
  </div>
  <div id="login-content" style="display :none;">
    <a class="btn btn-success btn-lg" onclick="$('#login-content').hide();$('#initial-content').show();$('#form-id').trigger('reset');"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i>Back</a>
    <form id="form-id">
      <div class="form-group">
        <label for="inputEmail">Email / Username</label>
        <input class="form-control" type="email" id="inputEmail" placeholder="Email">
      </div>
      <div class="form-group">
        <label for="inputPassword">Password</label>
        <input class="form-control" type="password" id="inputPassword" placeholder="Password">
        <a type="button" class="btn btn-link btn-sm">Forgot password</a>
      </div>
      <div class="form-group">
        <a type="button" class="btn btn-info btn-md">Log in</a>
      </div>
    </form>
  </div>
</div>

And as suggested by others use bootstrap dialog. But in that case also looking at your requirement your code will also remain same until and unless you want to show login button somewhere rather then modal-body. No doubt that plugin will make you code way more easy to understand and edit then ever before.

You can:

1. Put the form HTML into a Javascript variable or into a hidden div
2. Make a jQuery function and on click of the Login button load the output of the form HTML.

I suggest trying bootstrap-dialog, it's a great tool that simplifies the work to do for displaying dialogs.

See the Manipulating Dialog Message section for how to change your dialog content dynamically, there is a setMessage functionality:

    BootstrapDialog.show({
        title: 'Default Title',
        message: 'Click buttons below.',
        buttons: [{
            label: 'Message 1',
            action: function(dialog) {
                dialog.setMessage('Message 1');
            }
        }, {
            label: 'Message 2',
            action: function(dialog) {
                dialog.setMessage('Message 2');
            }
        }]
    });