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

How it supposed to be

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) });

CodePudding user response：

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) });