如何更改弹出窗口/模态的位置？

Question

我有3个div（每个div都有一个弹出窗口，一旦点击div就会显示） 现在，弹出窗口显示与所选div相关，但不是特定位置。 current

预期的弹出模式应该在所选的div附近，如下所示 expected

到目前为止的CSS代码

            .ui-selectee{
        position: relative;
        display: inline-block;
        border-right-style: solid;
        border-bottom-style: solid;
        border-top-style: solid;
        border-width: 0.1rem;
        border-color: #B2BABB;
        width: 4.1rem;
          max-width: 4.1rem;
          max-height: 2.3rem;
        height: 2.3rem;
        margin: 0;
        overflow: hidden;
        cursor: pointer;
      /*  white-space: nowrap; */ 
        }
        /* The actual popup window : reservation detail; */
        #ReservationBookedBlock, #ReservationBookedBlock1{ /*  visibility: hidden;  */
background-color: white;
color: black;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
top: 125%;  
left: 50%;
margin-left: -80px;

            border: dotted; width:38rem; padding:1rem; 
            }  
            .ui-selectee .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;}
            /* The arrow of the popup */
        .ReservationBookedBlock_cssClass ::after{
            content: "";
            position: absolute;
            bottom: 100%;
            right: 50%;
            margin-left: -25px;
            margin-bottom: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;/* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn {
from {opacity: 0;} 
to {opacity: 1;}}@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}}

相关的html标记（该代码使用Salesforce visualforce编写）

            <script>
            // jQuery script
            // Get the modal
            var modal = document.getElementById('myModal');
            var resBooked=document.getElementById('ReservationBookedBlock');
         // Get the button that opens the modal
            var buttonCell = document.getElementsByClassName("ui-selectee");
            // Get the <span> element that closes the modal
            var span = document.getElementsByClassName("close")[0];
            // When the user clicks the button, open the modal
            for (var i = 0; i < buttonCell.length; i++) {
                buttonCell[i].onclick = function() {
                    var cellNumber1 = $(this).attr('id');
                    //alert($(this).attr('id'));
                    var resNo=document.getElementById(cellNumber1).style.backgroundColor;
                    //alert(resNo);
                    //alert(resNo.length);
                    if(resNo == 'red' || resNo == 'green'){
                        //alert('Its already reserved');
                       // resBooked.style.display = "block";
                        //alert('document.getElementById(cellNumber1).innerHTML-->'+document.getElementById(cellNumber1).innerHTML);
                        ReservationBookedCallBack(document.getElementById(cellNumber1).innerHTML);
                        ui-selectee.classList.toggle('show');
                    }
                    else
                       modal.style.display = "block";

                    var id = $(this).attr("data-id").split(":");
                    console.log(id);
                    var roomName =  $(document.getElementById(id[0]+'')).text();
                    let currentDate = $('#datepicker-container').datepicker("getDate");;
                    var startDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + - 1 + parseInt(id[1]));
                    console.log(roomName,startDate);
                    localStorage.setItem('roomName', roomName);
                    localStorage.setItem('startDate', startDate);
                    document.getElementById("roomname").value = roomName;
                    var strdt = startDate.getFullYear()+"-"+ startDate.getMonth()+"-"+ startDate.getDate()
                    document.getElementById("stdate").value = startDate;
                    //        alert('room name : '+roomName);
                    //alert('date : '+strdt );
                }
            }

            // When the user clicks on <span> (x), close the modal
            span.onclick = function() {
                modal.style.display = "none";
            }
            // When the user clicks anywhere outside of the modal, close it
            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            }
            </script>
        </div>

        <script>
        $(document).ready(function() {
            $("#datepicker-container").trigger('click');
            console.log(1);
        });</script></body><apex:actionFunction name="ReservationBookedCallBack" action="{!ReservationBooked}" reRender="ReservationBookedBlock1,ReservationBooked">
        <apex:param name="ReservationName" assignTo="{!ReservationName}" value="" /></apex:actionFunction>