0

¿Cómo funcionan los posts de facebook para ver una imagen en una ventana sin cambiar de sitio para verla? ¿Qué metodo hay que usar para hacer eso.?

Ejemplo:

introducir la descripción de la imagen aquí

https://www.facebook.com/photo.php?fbid=781964085286497&set=gm.1155667867878834&type=3&theater

2
  • para el que sepa de que esta hablando o brinde una respuesta, es posible que pueda mejorar el titulo de la pregunta para que sea util para otros ademas de ser mas facil el encontrala Commented el 13 feb. 2017 a las 23:44
  • tu no sabes como se hace o tienes una tioria ?
    – Shareiv
    Commented el 13 feb. 2017 a las 23:48

1 respuesta 1

2

Tal como lo describes, eso es un modal. Hay muchas librerías que implementan la funcionalidad de desplegar un diálogo modal. Antiguamente la más común era jQuery-UI, pero diría que hoy la más difundida es bootstrap.

En bootstrap el modal se despliega como en el ejemplo siguiente:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <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="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

6
  • 1
    gracias amigo pero lo que quiero saber es como sale el url de la imagen
    – Shareiv
    Commented el 14 feb. 2017 a las 0:39
  • tú dices... cómo hacer que un link en particular te lleve a una página y además gatille la apertura de un modal?
    – ffflabs
    Commented el 14 feb. 2017 a las 0:41
  • 1
    si igual que facebook usando un ventana modal cambie la url del navagador sin salir del post
    – Shareiv
    Commented el 14 feb. 2017 a las 0:44
  • 1
    el modal use el metodo GET para otener la informacion
    – Shareiv
    Commented el 14 feb. 2017 a las 0:45
  • para eso usas una biblioteca que maneje ruteo. Por ejemplo Backbonejs y AngularJS tienen routers, que permiten asociar eventos a determinadas urls, asi como ejecutar eventos cuando la url calza con un determinado patrón, todo eso sin salir del post, sino que emulando la navegación tradicional. En este caso, lo que ves en Facebook se hace con React Router.
    – ffflabs
    Commented el 14 feb. 2017 a las 0:51

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.