1

Tengo 15 botones en una misma página, cada uno debe desplegar un modal con una imagen diferente. El problema es que no quiero repetir 15 bloques de código, tanto del trigger del modal como de la estructura del modal; ¿Cómo evito repetir código apoyándome de JS? (en el ejemplo sólo agrego dos modals)

$('.button, .button1').click(function(){
  var buttonId = $(this).attr('id');
  $('#modal-container, #modal-container1').removeAttr('class').addClass(buttonId);
  $('body').addClass('modal-active');
})

$('#modal-container, #modal-container1').click(function(){
  $(this).addClass('out');
  $('body').removeClass('modal-active');

});
#modal-container1.one1.out, 
#modal-container.one.out {
  transform: scale(1);
  animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container1.one1.out .modal-background1 .modal1,
#modal-container.one.out .modal-background .modal {
  animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
<div id="one" class="button">Hola</div>
<div id="one1" class="button1">Hola</div>


<!-- modal1 -->
<div id="modal-container">
  <div class="modal-background">
    <div class="modal">
      <h2>I'm a Modal</h2>
      <img src="resp_colectiva.jpg">
    </div>
  </div>
</div>

<!-- Modal2 -->
<div id="modal-container1">
  <div class="modal-background1">
    <div class="modal1">
      <h2>I'm a Modal</h2>
      <img src="retro_continua.jpg">
    </div>
  </div>
</div>

1
  • No veo tu código, por favor agrégalo para que podamos ayudarte :)
    – lromeraj
    Commented el 30 jul. 2017 a las 23:38

3 respuestas 3

0

Una forma podría ser tener almacenado en un array empleando clave:valor donde la clave sería el id del botón que estaría ya definido en el document (esto se podría automatizar para no hacerlo manual) y el valor sería el src de la imagen de la modal.

Para este ejemplo haré uso de la modal de bootstrap solo a modo de ejemplo , Cuando se da click sobre algún botón, capturamos el id del botón y con ese id obtenemos el valor src para esa clave en nuestro array images , por ultimo ese valor le asignamos al source de nuestra etiqueta img en la modal

var images = {
"imagen1" : "http://i.imgur.com/nyljaMX.png",
"imagen2" : "http://i.imgur.com/atRtXuMb.jpg",
"imagen3" : "http://i.imgur.com/nhX3VEW.jpg"
};
$(document).on('click', 'button', function(event) {
   var id = $(this).attr('id');
   $('#imagen').attr('src', images[id]);
   $('#myModal').modal();    
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"> </script>
<button id="imagen1" class="btn btn-primary">Hola</button>
<button id="imagen2" class="btn btn-info">Hola</button>
<button id="imagen3" class="btn btn-success">Hola</button>

<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <img src="" id="imagen" width="550" height="400">
      </div>
    </div>
  </div>
</div>

2
  • Mil gracias Joel! Reduje mi código en gran manera. Saludos!
    – Gio
    Commented el 1 ago. 2017 a las 20:44
  • Bien. Un placer ayudar. Saludos
    – Dev. Joel
    Commented el 1 ago. 2017 a las 21:15
0

Añade un atributo a cada botón, por ejemplo data-modal="modal3" y class="btn-modal".

Luego, cambia el id de cada modal, por ejemplo <div id="modal3" class="modal modal-background">.

Luego, haces $('.btn-modal').click() y dentro miras el valor de data-modal y activas la ventana correspondiente.

0

en la documentacion de bootstrap tienes un ejemplo para eso:

http://getbootstrap.com/javascript/#modals-related-target

Basicamente, utilizas el data-wathever para indicar que diferencia cada boton:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

el modal se hace mas o menos igual...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

y luego en el javascript analizas el data del boton que ha lanzado el evento show:

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Yo lo que hago en estos casos es meter en el botón un data-json="{}" con los datos de lo que deberia salir en el modal para ese boton. Luego en el javascript, leo ese json y lo pinto en el modal.

1
  • Muchas gracias Jakala!
    – Gio
    Commented el 1 ago. 2017 a las 20:44

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.