Investigué un poco a través de Google y no encontré nada útil. Ahora se basa en el desplazamiento de todas las páginas, pero necesito que se base en el desplazamiento modal... Imagen de la página
Mi código CSS:
.bbox { cursor: pointer; border-style: dashed; border-color: red; background-color: transparent; position: absolute; }Mi código HTML:
<div class="modal fade" tabindex="-1" role="dialog" id="correctionModal" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-body"> <div id="limit" style="position: relative;width: 100%; height: auto"> <img src="#" id="output-image" class="img-fluid"> <div class="bbox" id="eye_1" style="width: 20px; height: 20px;"></div> <div class="bbox" id="eye_2" style="width: 20px; height: 20px;"></div> </div> <br> <div class="form-group"> <button type="button" class="btn btn-success btn-sm" id="confirmCorrections">Patvirtinti</button> </div> </div> </div> </div> </div>Mi código JS:
var x_L = x - w_L/2; var y_L = y - h_L/2; $("#eye_1").height(h_L).width(w_L); $("#eye_1").offset({ top: y_L.toFixed(2), left: x_L.toFixed(2) });Debe agregar el desplazamiento de sus cajas de ojos al desplazamiento de su elemento principal.
Algo como esto:
var x_L = x - w_L/2; var y_L = y - h_L/2; x_L += $("#limit").offset().left; y_L += $("#limit").offset().top; $("#eye_1").height(h_L).width(w_L); $("#eye_1").offset({ top: y_L.toFixed(2), left: x_L.toFixed(2) });