如何动态更改引导程序模式主体内容

Question

我创建了一个引导模态，我正在寻找可能的解决方案以使我的模态内容动态更改..这是我的模态

<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 -->`

当我单击“登录”按钮时，我想将模态内容更改为该登录表单

 <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>

非常感谢！

Answer 1

只要看一下代码，您就会知道解决方案。

只需记住，您不必在浏览器中看不到的内容就不会出现。 例如，在您的情况下，您要做的是单击登录名和代码，该代码应从其他位置加载到您的modal-body div中，在这种情况下，没有必要这样做，那么您可以执行我所拥有的显示在摘要中。

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/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> 

并按照其他人的建议使用引导对话框。 但是在这种情况下，还要查看您的要求，您的代码也将保持不变，直到并且除非您想在某个地方而不是modal-body显示登录按钮。 毫无疑问，该插件将使您的代码比以往更容易理解和编辑。

Answer 2

您可以：

1. 将表单HTML放入Javascript变量或隐藏的div中
2. 创建一个jQuery函数，然后单击“登录”按钮，加载HTML表单的输出。

Answer 3

我建议尝试bootstrap-dialog ，它是一个很棒的工具，可以简化显示对话框的工作。

有关如何动态更改对话框内容的信息，请参见“ 操作对话框消息”部分，其中有setMessage功能：

    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');
            }
        }]
    });