php - Bootstrap multiple models in same page give same for all models -
i have made 5 models in single page using bootstrap username,password,email,mobile , student different models buttons give same model of of username button change id in each element code
<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">× </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">× </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">× </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">× </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">× </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>
add related ids in buttons well. targeting 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>
Comments
Post a Comment