如何動態更改引導程序模式主體內容

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