0

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>

2
  • 1
    no es mas sencillo agregar modals diferentes? Commented el 11 abr. 2017 a las 23:08
  • ¿Qué datos traes del API/servicio? ¿A partir de ellos generas el HTML a mostrar?
    – gugadev
    Commented el 11 abr. 2017 a las 23:22

3 respuestas 3

2

No se si entendi bien, pero si quieres agregar elementos HTML puedes usar append

Algo así:

$("#id_del_elemento_al_que_se_agrega").append("Código html");
1

$(document).ready(function(){

$('#seguidores').click(function(){
         $('#pocos').html('<h1>seguidores</h1>')
});

$('#favoritos').click(function(){
         $('#pocos').html('<h1>favoritos</h1>')
});

$('#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="#" id="seguidores" 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" id="favoritos" 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>

3
  • Disculpa amigo.Ya acepte tu respuesta como la indicada y me funciono.Tengo un problemita ahora.En esta parte $('#pocos').html('<h1>favoritos</h1>')puse el textbox que yo quiero,pero no me funciona lo que quiero hacer que antes si me funcionaba.Ahi tengo un autocompletar.No me funciona.que hago?
    – luis
    Commented el 12 abr. 2017 a las 1:00
  • 1
    tu función se llama cuando cargas la pagina, pero entonces no existía el control, lo que tienes que hacer es llamar a la función cuando se crea el control. osea debajo de $('#pocos').html('<h1>favoritos</h1>') tienes que poner tu funcion $('.otro_control').autocompletar(function(){ }); Commented el 12 abr. 2017 a las 1:05
  • Muchas gracias!!Donde pones autocompletar yo tengo keyup. Pero gracias ahora funciona bien.
    – luis
    Commented el 12 abr. 2017 a las 1:13
0

aqui te dejo mi codigo funciona de maravilla. copie y pegue lo que tengo esto va en una .php

 <td><center><span data-toggle='tooltip' title='Ver XML STEP'><a  data-toggle='modal' data-target='#Modificar' href='XmlCpg.php?id=$row[lst_IdIntegracion]&cod=$row[codart]'><span style='color:red' class='fa fa-eye'></span></a></span></center></td>
                               </tr>

                    </table> 
                </div>
            </div>
        </div>



        <div class="modal fade " id="Modificar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content ">

                </div>
            </div>
        </div>

aqui va el otro .php

<div class="modal-header">

    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title"><center>titulo</center></h4>
</div>

<div class="modal-body ">

        <pre>aqui pones el codigo q quieras</pre>

</div>
<div class="modal-footer">

    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
1
  • 2
    Podrias aclarar que hace cada parte de tu codigo? mira Cómo responder para ver como hacer una respuesta mas amigable
    – gbianchi
    Commented el 2 ago. 2017 a las 22:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.