Question

我创建了一个bootstrap模式，我正在寻找可能的解决方案，使我的模态内容动态变化..这是我的模态

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

正如其他人建议使用bootstrap对话框。但在这种情况下，除了你想在某个地方而不是modal-body显示登录按钮之外，你的代码也会保持相同的状态。毫无疑问，插件将使您的代码更容易理解和编辑，直到以前。

Answer 2

你可以：

将表单HTML放入Javascript变量或隐藏div
创建一个jQuery函数，然后单击Login按钮加载表单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');
            }
        }]
    });

如何动态更改bootstrap模态正文内容

3 个答案: