1

Quiero activar una ventana modal desde el buscador, me funciona con target pero no me guta el # quisiera saber si es posible quitarlo o si hay otro metodo para darle una "url" al div, ya sé que el otro metodo son las direcciones de las carpetas pero no quiero y no puedo gastar espacio.

https://www.ejemplo.com/#widget

<!-- Link que me interesa -->

https://www.ejemplo.com/widget

body{
margin: 0;
}
#target{
height: 100vh;
background-color: #ff0;
display: none;
}
#target:target{
display: flex;
align-items: center;
justify-content: center;
}
h2{
margin: 0;
}
a{
width: 50%;
position: absolute;
top: 50%;
right: 0;
left: 0;
margin: auto;
color: #000;
padding: 10px;
font-size: 15px;
background-color: #f1f1f1;
text-align: center;
text-decoration: none;
border: 1px solid #ddd;
z-index: -1;
}
<div id="target">
<h2>Ventana modal</h2>
</div>

<a href="#target">Open Modal</a>

2 respuestas 2

0

Puedes usar jQuery con el método .css() para agregarle los estilos que necesites, sólo seleccionamos la etiqueta, llamamos al método preventDefault(); para que no haga el href, ya que te mandará el error por no tener el #, cualquier duda hazla saber.

$('a').click(function(e){
  e.preventDefault();
  
  $('#target').css({
  'display': 'flex',
'align-items': 'center',
'justify-content': 'center'
 });

 
})
body{
margin: 0;
}
#target{
height: 100vh;
background-color: #ff0;
display: none;
}
/*#target:target{
display: flex;
align-items: center;
justify-content: center;
}*/
h2{
margin: 0;
}
a{
width: 50%;
position: absolute;
top: 50%;
right: 0;
left: 0;
margin: auto;
color: #000;
padding: 10px;
font-size: 15px;
background-color: #f1f1f1;
text-align: center;
text-decoration: none;
border: 1px solid #ddd;
z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="target">
<h2>Ventana modal</h2>
</div>

<a href="#target">Open Modal</a>

2
  • Gracias, pero y el link? si quiero activar el div desde la url... lo que me interesa cambiar es que el link quede formado sin el # y totalmente funcional.
    – Header90
    Commented el 24 may. 2019 a las 22:38
  • Una vez presionado la etiqueta <a></a> quieres que la URL se mire sin el #, porque no creo que eso pueda funcionar, ya que estarías enviando a otra página y no sé para qué quieres hacer ese tipo de cosas, sólo por estética? no te compliques la existencia. Commented el 24 may. 2019 a las 22:49
0

Esto es algo que se puede conseguir manipulando la información de sesión y navegación con JavaScript. Internamente no tendrías que cambiar nada en los enlaces (que seguirían teniendo el #), pero vas a ocultarlo en la barra de navegación.

Nota: Este método podría tener consecuencias negativas si el usuario usa las teclas de historial para recargar la página y moverse hacia adelante o atrás. (En Chrome parece que funciona bien hacia adelante y atrás, a menos que pulses recargar). También podría tener problemas de al hacer deep linking.

La idea sería detectar un cambio en el # y reemplazar el estado del historial para que se muestre una URL diferente, sin el #. Algo como esto:

  // cuando cambia el hashtag
  window.addEventListener("hashchange", function() {
    // cambia la URL de la barra de dirección con el hashtag
    history.replaceState({}, null, window.location.hash.replace("#", "/"));
  });

Nota: éste es un ejemplo ilustrativo y muy básico del código en JS, en el que se asume que vas a estar siempre en la raíz del sitio. Para que funcione con diferentes niveles, tendrías que añadir algo más de lógica.

Vamos a ver un ejemplo con ese código. Imaginemos que estás en http://example.com con el siguiente código HTML:

<div id="target1">
  <h2>Ventana modal</h2>
  <a href="#target2">Ir a Sección</a>
</div>
<div id="target2">
  <h2>Sección 1</h2>
</div>

<a href="#target1">Abrir Modal</a>

Y sigues los siguientes pasos:

  1. Cargas la página y la url en la barra de dirección es http://example.com/

  2. Pulsas en el enlace "Abrir modal" y se salta al modal. Como ha cambiado el hash a #target1, se ejecuta el código JS (esto ocurre en un instante y el usuario no nota cambio alguno) y la url en la barra de dirección es http://example.com/target1

  3. Pulsas en el enlace "Ir a sección" y el navegador te lleva a la sección especificada. Como ha cambiado el hash a #target2, se ejecuta el código JS (de nuevo, en un instante) y la url en la barra de dirección es http://example.com/target2

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.