ブートストラップ複数のモデルが同じページにすべてのモデルを提供

Question

ユーザー名、パスワード、メール、モバイル、学生のブートストラップを使用して1つのページに約5つのモデルを作成しましたが、すべてのボタンはユーザ名ボタンも、私は私のコードは

<div class="container"> 
<h2>Account settings</h2> 
    <label class="control-label col-sm-10">username : <?php $name = 
$_SESSION['username']; echo $name;?></label> 
<div class="col-sm-offset-4 col-sm-2"> 
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" 
data-target="#myModal">change username</button> 
    </div> 
<div class="modal fade" id="myModal" role="dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 

     <button type="button" class="close" data-dismiss="modal">&times; 
</button> 
     <h4 class="modal-title">Change username</h4> 
    </div> 
    <div class="modal-body"> 
     <center>old username: <?php $name = $_SESSION['username']; echo 
$name;?></center><br> 
     new username : <input type="text"> 
     <div class="modal-footer"> 
    </div> 
    </div> 
    </div> 
</div> 
</div> 
</div> 
<div class="container"> 
    <label class="control-label col-sm-10">password : <?php $name = 
    $_SESSION['password']; echo $name;?></label> 
<div class="col-sm-offset-4 col-sm-2"> 
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" 
data-target="#myModal">change password</button> 
    </div> 
<div class="modal hide fade" id="modal2" tabindex="-1" role="dialog" aria- 
labelledby="myModalLabel" aria-hidden="true" style="display: none;"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 

     <button type="button" class="close" data-dismiss="modal">&times; 
</button> 
     <h4 class="modal-title">change password</h4> 
    </div> 
    <div class="modal-body"> 
     <img id="myImg" src="1.jpg" alt="Trolltunga, Norway" width="400" 
height="300"> 
     <div class="modal-footer"> 
    </div> 
    </div> 
    </div> 
</div> 
</div> 
</div> 
<div class="container"> 
    <label class="control-label col-sm-10">email : <?php $name = 
$_SESSION['email']; echo $name;?></label> 
<div class="col-sm-offset-4 col-sm-2"> 
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" 
data-target="#myModal">change email</button> 
    </div> 
<div class="modal fade" id="myModal3" role="dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 

     <button type="button" class="close" data-dismiss="modal">&times; 
    </button> 
     <h4 class="modal-title">Modal Header</h4> 
    </div> 
    <div class="modal-body"> 
     <img id="myImg" src="1.jpg" alt="Trolltunga, Norway" width="400" 
    height="300"> 
     <div class="modal-footer"> 
    </div> 
    </div> 
    </div> 
</div> 
</div> 
</div> 
<div class="container"> 
    <label class="control-label col-sm-10">mobile numb: <?php $name = 
$_SESSION['mobile']; echo $name;?></label> 
<div class="col-sm-offset-4 col-sm-2"> 
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" 
data-target="#myModal">change mobile</button> 
    </div> 
    <div class="modal fade" id="myModal4" role="dialog"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 

     <button type="button" class="close" data-dismiss="modal">&times; 
    </button> 
     <h4 class="modal-title">Modal Header</h4> 
    </div> 
    <div class="modal-body"> 
     <img id="myImg" src="1.jpg" alt="Trolltunga, Norway" width="400" 
    height="300"> 
     <div class="modal-footer"> 
    </div> 
    </div> 
    </div> 
</div> 
</div> 
</div><br> 
<div class="container"> 
<div class="col-sm-offset-4 col-sm-2"> 
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" 
data-target="#myModal">Add student</button> 
    </div> 
<div class="modal fade" id="myModal5" role="dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 

     <button type="button" class="close" data-dismiss="modal">&times; 
</button> 
     <h4 class="modal-title">Modal Header</h4> 
    </div> 
    <div class="modal-body"> 
     <img id="myImg" src="1.jpg" alt="Trolltunga, Norway" width="400" 
height="300"> 
     <div class="modal-footer"> 
    </div> 
    </div> 
    </div> 
</div> 
</div> 
</div> 
</body> 

Answer 1

が同様のボタンに関連したIDを追加し、各要素にIDを変更します。あなたはmyModalだけをターゲットにしています

<button type="button" class="btn btn-primary btn-block" data-toggle="modal" 
data-target="#myModal">change mobile</button> 
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" 
data-target="#myModal4">change mobile</button>