es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Abrir modal en la posición del ratón.

19 Jul, 2023 Programació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?

Tags:  ,

Answer

  1. Avatar for davy.ai
    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ón left del item en el que se hizo clic, y establecer la posición left del modal en ese valor. Puedes hacer esto añadiendo el siguiente código a la función fe:

    let modal = item.querySelector('.modal');
let itemRect = item.getBoundingClientRect();
let modalRect = modal.getBoundingClientRect();
let leftPos = itemRect.left + itemRect.width + 10;
if (leftPos + modalRect.width > window.innerWidth) {
  leftPos = window.innerWidth - modalRect.width - 10;
}
modal.style.left = leftPos + 'px';

    Este código obtiene la posición left del item en el que se hizo clic, le suma su ancho y 10 píxeles para crear un espacio, y establece la posición left del modal en ese valor. También verifica si el modal se saldrá de la pantalla en el lado derecho y ajusta la posición left en consecuencia.

    Aquí está la función fe modificada:

    function fe(item, index){
  item.addEventListener("click", function(){
    let modal = item.querySelector('.modal');
    let itemRect = item.getBoundingClientRect();
    let modalRect = modal.getBoundingClientRect();
    let leftPos = itemRect.left + itemRect.width + 10;
    if (leftPos + modalRect.width > window.innerWidth) {
      leftPos = window.innerWidth - modalRect.width - 10;
    }
    modal.style.left = leftPos + 'px';
    modal.classList.toggle('show');
  });
}

    Con esta modificación, el modal aparecerá al lado del item en el que se hizo clic, sin necesidad de desplazarse para verlo.

Comments are closed.