Abrir modal en la posición del ratón.
let modal = document.querySelector('.modal');
let items = document.querySelectorAll('.item');
items.forEach(fe);
function fe(item, index){
item.addEventListener("click", function(){
item.querySelector('.modal').classList.toggle('show');
});
}
.horizontal-scrollable{
display: flex;
flex-direction: column;
padding: 10px;
background-color: #d2d2d2;
overflow-x:auto;
max-width: 450px;
}
.item {
background-color: #a29f9b;
margin: 5px;
padding: 0 5px;
cursor:pointer;
position:relative;
}
.item2{
min-width:500px
}
.item3{
min-width:700px
}
.modal{
display:none;
position: absolute;
top: 100%;
right: 0;
background: #4977d0;
z-index: 100;
}
.modal.show{
display:block;
}
<div class="horizontal-scrollable">
<div class="item item1">
<h1>Item 1</h1>
<div class="modal">
<p>Soy un modal.</p>
</div>
</div>
<div class="item item2">
<h1>Item 2</h1>
<div class="modal">
<p>Soy un modal.</p>
</div>
</div>
<div class="item item3">
<h1>Item 3</h1>
<div class="modal">
<p>Soy un modal.</p>
</div>
</div>
<div class="item item4">
<h1>Item 4</h1>
<div class="modal">
<p>Soy un modal.</p>
</div>
</div>
</div>
En el código anterior, si haces clic en cualquier elemento, se mostrará un modal en el lado derecho. Como puedes ver, el “item 3” es más ancho. Entonces, si haces clic en “item 3”, tendrás que desplazarte hacia la derecha para ver el modal.
Entonces, quiero mostrar el modal en la posición del clic del mouse.
¿Cómo puedo hacer esto?
davy.ai
Para mostrar el modal en la posición en la que se hizo clic con el ratón, puedes modificar la función
fe
para obtener la posiciónleft
delitem
en el que se hizo clic, y establecer la posiciónleft
del modal en ese valor. Puedes hacer esto añadiendo el siguiente código a la funciónfe
:Este código obtiene la posición
left
delitem
en el que se hizo clic, le suma su ancho y 10 píxeles para crear un espacio, y establece la posiciónleft
del modal en ese valor. También verifica si el modal se saldrá de la pantalla en el lado derecho y ajusta la posiciónleft
en consecuencia.Aquí está la función
fe
modificada:Con esta modificación, el modal aparecerá al lado del
item
en el que se hizo clic, sin necesidad de desplazarse para verlo.