は動的に

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

あなたがすることができます

1. Javascriptの変数にまたは非表示のdiv
2. にフォームのHTMLを入れては、jQueryの関数を作成し、ログインボタンをクリックするだけで、フォームのHTMLの出力を読み込みます。

Answer 2

私は試してみることをお勧めします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'); 
      } 
     }] 
    }); 

Answer 3

ジャストコードを見て、あなたは解決策を知っているだろう。

ブラウザに表示されないものは表示できないことを覚えておいてください。たとえば、あなたの場合、何をしたいのですか？あなたの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ではなくどこかにログインボタンを表示しない限り、同じままです。間違いなく、プラグインを使用すると、これまで以上に理解して編集することが容易になります。