I did some research through google and I didn't found anything useful. It's now based by all page offset, but I need that it to be based by modal offset... Image of page
My CSS code:
.bbox {
cursor: pointer;
border-style: dashed;
border-color: red;
background-color: transparent;
position: absolute;
}
My HTML code:
<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>
My JS code:
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) });
You need to add the offset of your eye boxes onto the offset of their parent element.
Something like this:
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) });