如何动态更改引导模式正文内容

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，在这种情况下，没有必要这样做，而是你可以做我所拥有的在 sn-p 中显示。

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