Estoy implementando varias ventanas modales mediante Bootstrap. Una para cada cosa diferente.He hecho la prueba para cargar diferentes datos en una misma ventana modal.
Explico....
Tengo una para recoger usuarios favoritos,otra para usuarios seguidores y otra para usuarios a los que sigo.
He hecho la prueba para cuando presiono el botón indicado ya sea para cualquiera de esos datos que quiero,me abran el mismo modal,pero con la diferencia de que me traen datos según el botón que presiono,ya sea favoritos,seguidores y siguiendo.Todo marcha muy bien.
Esos datos los traigo de la BD a través de ajax(Jquery) y PHP.
¿Cual es el problema?
Hacer aparecer elementos HTML diferente según el link en el que hago clic.
Ejemplo:
cuando hago clic en el link Favoritos me gustaría que me saliera un textbox,pero cuando hago clic en el link Seguidores no quiero el textbox. Sabiendo que estos datos(Seguidores,Favoritos,Siguiendo)se abrirán el mismo modal.
Quizás me puedan entender.
$(document).ready(function(){
$('#multi_opt_user').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var recipient = button.data('whatever')
var modal = $(this)
modal.find('.modal-title').text(recipient)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<a href="#" data-toggle="modal" data-target="#multi_opt_user" data-whatever="Personas que me siguen." class="add_more" id="add_more_to">Seguidores</a>
<a href="#" data-toggle="modal" data-target="#multi_opt_user" data-whatever="Mis favoritos." id="makeagifttosomeone">
<i class="fa fa-gift" aria-hidden="true"></i><br>
<span class="sp_style">Favoritos</span>
</a>
<div class="modal fade" id="multi_opt_user" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<i class="fi-heart"></i>
<button id="pethatlimypro" type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
<div class="modal-body">
<div id="pocos"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>