1

tengo una página que carga datos introducir la descripción de la imagen aquí

el código de los botones es el siguiente:

<div class="elements-list clearfix">
    {{-- Button to Open the Modal --}}
    <button type="button" class="pull-left margin-clear btn btn-sm btn-info btn-animated" data-toggle="modal" data-target="#myModal">
    Ampliar<i class="fa fa-eye"></i>
    </button>

    <a href="{{ $link->link }}" target="_blank" class="pull-right margin-clear btn btn-sm btn-default-transparent btn-animated">Ir a la Página<i class="fa fa-link"></i></a>
</div>

con el botón disparo el modal que se muestra asi:

introducir la descripción de la imagen aquí

El código que carga el modal es el siguiente:

{{-- The Modal --}}
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
        {{-- Modal Header --}}
        <div class="modal-header">
            <h4 class="modal-title">{{ $link->title }}</h4>
            <button type="button" class="close" data-dismiss="modal">&times; 
 </button>
        </div>

        {{-- Modal body --}}
        <div class="modal-body">
            {{ $link->description }}
        </div>

        {{-- Modal footer --}}
        <div class="modal-footer">
            <a href="{{ $link->link }}" class="btn btn-info">Ir a la Página</a>
            <a href="#" class="btn btn-danger" data-dismiss="modal">Cerrar</a>
        </div>
    </div>
   </div>
  </div>

El problema que tengo es que no importa cuál boton presione de todos los datos mostrados, siempre me muestra los datos del ultimo registro que se muestra en la página. Cómo puedo solucionar esto ? Alguien puede darme una mano ? Desde ya muchas gracias

1 respuesta 1

2

Yo lo haría de la siguiente manera: poner una clase al boton de ampliar y luego con jquery setear los valores que quieres desplegar en el modal:

     <button type="button" 
        class="pull-left margin-clear btn btn-sm btn-info btn-animated btnShowInfo" 
        data-toggle="modal" 
        data-title="titulo de ejemplo"
        data-description="my own description"
        data-link="https://es.stackoverflow.com/"
    >
        Ampliar<i class="fa fa-eye"></i>
        </button>

$(document).on('click', '.btnShowInfo', function(e){
    e.preventDefault();
    var button = $(this);
    var title = button.data('title');
    var description= button.data('description');
    var link = button.data('link');

    $('.modal-title').html(title);
    $('.modal-body').html(description);
    $('.btn-info').attr('href', link);

    $('#myModal').modal('show');
});

Espero te sirva. Saludos.

3
  • Interesante, no sabía que se podía hacer eso... pero que valores pongo en el código del modal ?
    – MNibor
    el 5 jul. 2019 a las 16:49
  • solo pon las etiquetas de apertura y cierre donde quires que vaya cada valor, es decir: <h4 class="modal-title"></h4> para el título, <div class="modal-body"> </div> y así. Y quitas el data-toggle="modal" del botón ya que lo estas disparando con javascript
    – Peter
    el 5 jul. 2019 a las 16:56
  • Lo estarías haciendo con javascript con la instrucción: $('#myModal').modal('show');
    – Peter
    el 5 jul. 2019 a las 17:01

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.