Como lo comentaste en el comentario valga la redundancia el atributo href solo lo usas para abrir una modal, y dices que el tag <a>
te da problemas entonces hagamos otra solución para que abras la modal sin la etiqueta <a>
y obtener el id de la modal que quieres abrir:
$(".abrir").on("click", (e) => {
let id = $(e.target).attr("href");
let id2 = $(e.target).attr("data-href");
alert("El id por el atributo href es: "+id+" y el id por el atributo data-href: "+id2);
});
const div = document.getElementsByClassName("abrir2")[0];
div.addEventListener('click', (e) => {
let id = div.getAttribute("href");
let id2 = div.getAttribute("data-href");
alert("href es: "+id+" y el id por el atributo data-href: "+id2);
});
.abrir,
.abrir2{
border:1px solid red;
border-radius:3px;
display:inline-block;
padding: 5px;
transition: all .3s;
}
.abrir:hover,
.abrir2:hover{
background: black;
color:white;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abrir" href="#modal" data-href="#modal">Abrir modal Jquery</div>
<div class="abrir2" href="#modal" data-href="#modal">Abrir modal JS puro</div>
Si te fijaste te cree dos opciones un con Jquery y otra con Js puro, usa la que mas te convenga, la idea es obtener el id obtiendo el atributo en este caso href del div, aunque href no es un atributo propio del div puedes declararlo y usarlo como un seudoaributo, eso quiere decir que no te afectara en los comportamientos propios del div, si tambien te fijates cree otro atributo llamado data-href para que vieras que puedes crear un atributo con un nombre que te convenga, en estos tiempo se esta usando mucho el data-algo, puede usar ese para obtener el id de la modal o usa el href como mejor te plazca, una vez obtiene el id puede invocar tu modal y hacerla abrir con un método propio de la modal, ejemplo en bootstrap la abririas asi: $("#modal").modal("show");
, no se que plugin estas usando pero ya tienes la idea general, obtiene el id y luego invocas el método que haría abrir tu modal. Espero te funcione.
Ejemplo llamando a un modal con Bootstrap:
$(".abrir").on("click", (e) => {
let id = $(e.target).attr("href");
$(id).modal("show");
});
a
, si tienes una imagen puedes envolverla en una etiquetaa
y listo:<a href="tu/ruta"><img src="ruta/imagen.png"></a>