Skip to main content
se añadieron 388 caracteres en el cuerpo
Origen Enlace
//Javascript
function abrirModal(objeto, detalleImg){
  $(".modal-body").html($(objeto).html() + "<br> " + $("."+detalleImg).html());
}
/*CSS*/
p{
  display: none;
}
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Ejemplo</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script>
        function abrirModal(objeto, detalleImg){
            $(".modal-body").html($(objeto).html() + "<br> " + $("."+detalleImg).html());
        }
      </script>
      <style>
        p{
            display: none;
        }
      </style>
    </head>
    <body>
        <div class="container">
          <h2>Ejemplo Modal</h2>

          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#miModal" onclick="abrirModal(this, 'detalleImg1')">
                <img src="https://www.w3schools.com/html/img_html5_html5.gif">
                <p class="detalleImg1">Este es el detalle de HTML5</p>
          </button>

          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#miModal" onclick="abrirModal(this, 'detalleImg2')">
                <img src="https://d21ii91i3y6o6h.cloudfront.net/gallery_images/from_proof/2236/large/1413860642/javascript.png">
                <p class="detalleImg2">Este es el detalle de Javascript</p>
          </button>

          <!-- Modal -->
          <div class="modal fade" id="miModal" role="dialog">
            <div class="modal-dialog">
            
              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Detalle Imagen</h4>
                </div>
                <div class="modal-body">
                  
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
    
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    </body>
</html>

Bootstrap

  - JQuery

NOTA:

Puedes hacer llamada ajax si necesitas que la imagen traiga mas información de forma asincrona, vale decir, que pinches, esta cargue y devuelva el resultado sin necesidad de que salgas de la pagina.

Dejo documentación de ello si necesitas

Ajax - Ajax-Jquery

<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Ejemplo</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script>
        function abrirModal(objeto, detalleImg){
            $(".modal-body").html($(objeto).html() + "<br> " + $("."+detalleImg).html());
        }
      </script>
      <style>
        p{
            display: none;
        }
      </style>
    </head>
    <body>
        <div class="container">
          <h2>Ejemplo Modal</h2>

          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#miModal" onclick="abrirModal(this, 'detalleImg1')">
                <img src="https://www.w3schools.com/html/img_html5_html5.gif">
                <p class="detalleImg1">Este es el detalle de HTML5</p>
          </button>

          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#miModal" onclick="abrirModal(this, 'detalleImg2')">
                <img src="https://d21ii91i3y6o6h.cloudfront.net/gallery_images/from_proof/2236/large/1413860642/javascript.png">
                <p class="detalleImg2">Este es el detalle de Javascript</p>
          </button>

          <!-- Modal -->
          <div class="modal fade" id="miModal" role="dialog">
            <div class="modal-dialog">
            
              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Detalle Imagen</h4>
                </div>
                <div class="modal-body">
                  
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
    </body>
</html>

Bootstrap

 JQuery

//Javascript
function abrirModal(objeto, detalleImg){
  $(".modal-body").html($(objeto).html() + "<br> " + $("."+detalleImg).html());
}
/*CSS*/
p{
  display: none;
}
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Ejemplo</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div class="container">
          <h2>Ejemplo Modal</h2>

          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#miModal" onclick="abrirModal(this, 'detalleImg1')">
                <img src="https://www.w3schools.com/html/img_html5_html5.gif">
                <p class="detalleImg1">Este es el detalle de HTML5</p>
          </button>

          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#miModal" onclick="abrirModal(this, 'detalleImg2')">
                <img src="https://d21ii91i3y6o6h.cloudfront.net/gallery_images/from_proof/2236/large/1413860642/javascript.png">
                <p class="detalleImg2">Este es el detalle de Javascript</p>
          </button>

          <!-- Modal -->
          <div class="modal fade" id="miModal" role="dialog">
            <div class="modal-dialog">
            
              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Detalle Imagen</h4>
                </div>
                <div class="modal-body">
                  
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
    
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    </body>
</html>

Bootstrap - JQuery

NOTA:

Puedes hacer llamada ajax si necesitas que la imagen traiga mas información de forma asincrona, vale decir, que pinches, esta cargue y devuelva el resultado sin necesidad de que salgas de la pagina.

Dejo documentación de ello si necesitas

Ajax - Ajax-Jquery

Origen Enlace

Para que redireccionar si puedes ocupar un modal?

Para hacer esto, ya que estaremos por el lado del cliente simplemente, deberemos ocupar javascript o jquery, y por sentido práctico que da la herramienta bootstrap.

<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Ejemplo</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script>
        function abrirModal(objeto, detalleImg){
            $(".modal-body").html($(objeto).html() + "<br> " + $("."+detalleImg).html());
        }
      </script>
      <style>
        p{
            display: none;
        }
      </style>
    </head>
    <body>
        <div class="container">
          <h2>Ejemplo Modal</h2>

          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#miModal" onclick="abrirModal(this, 'detalleImg1')">
                <img src="https://www.w3schools.com/html/img_html5_html5.gif">
                <p class="detalleImg1">Este es el detalle de HTML5</p>
          </button>

          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#miModal" onclick="abrirModal(this, 'detalleImg2')">
                <img src="https://d21ii91i3y6o6h.cloudfront.net/gallery_images/from_proof/2236/large/1413860642/javascript.png">
                <p class="detalleImg2">Este es el detalle de Javascript</p>
          </button>

          <!-- Modal -->
          <div class="modal fade" id="miModal" role="dialog">
            <div class="modal-dialog">
            
              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Detalle Imagen</h4>
                </div>
                <div class="modal-body">
                  
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
    </body>
</html>

Hay varias formas de jugar con javascript o jquery por el lado del cliente.

Te dejo las referencias para que puedas estudiarlas si gustas

Bootstrap

JQuery