javascript - Bootstrap 模式在长列表中的位置

Question

我目前在一个网站上工作，该网站正在加载一个包含一长串数据的表格。向下滚动时，每个字段都有一个按钮，可以打开模态窗口以查看有关该特定数据集的更多信息。然而，模态窗口总是在页面顶部打开，因此不可见。我可以通过自动向上滚动来处理这个问题，但这不是一个好的解决方案。我该怎么做才能使模态窗口始终在视线范围内打开？

模态窗口代码:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="width:130%;" >
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">ID: {{trace.ID}}'s Details</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">

          <div class="overview">
              <p><span style="text-decoration:bold;color:#212529;">Login Name:</span> {{trace.WEBLGNNAME}}</p>      
              <p><span style="text-decoration:bold;color:#212529;">Datum:</span> {{trace.DATUM}}</p>
              <p><span style="text-decoration:bold;color:#212529;">Zeit:</span> {{trace.ZEIT}}</p>                
          </div>

        <!-- Stacktrace Field -->
            <div class="form-group">
              <label for="comment"></label>
              <h5>Meldung</h5>
              <textarea class="form-control" rows="2" columns="10" style="font-size:12px;" readonly id="Meldung">{{trace.LOGTEXT}}</textarea>
              <div class="tooltip" title="In die Zwischenablage kopieren"><i ng-click="copyToClipboard('Meldung')" class="far fa-copy copy1"></br></i></div>
            </div>

          <!-- Stacktrace Field -->
            <div class="form-group">
              <label for="comment"></label>
              <h5>Stacktrace</h5>
              <textarea class="form-control" rows="10" columns="10" style="font-size:12px;" readonly id="Stacktrace">{{stacktrace}}</textarea>
              <div class="tooltip1" title="In die Zwischenablage kopieren"><i ng-click="copyToClipboard('Stacktrace')" class="far fa-copy copy2"></br></i></div>
            </div>  

        <div class="logInfo">
          <div class="col1">
              <p><span style="text-decoration:bold;color:#212529;">Web Service:</span> {{trace.WEBLGNNAME}}</p>     
              <p><span style="text-decoration:bold;color:#212529;">Label:</span> {{trace.DATUM}}</p>
              <p><span style="text-decoration:bold;color:#212529;">Fehler Code:</span> {{trace.ZEIT}}</p>                 
          </div>

          <div class="col2">
              <p><span style="text-decoration:bold;color:#212529;">Programm:</span> {{trace.WEBLGNNAME}}</p>        
              <p><span style="text-decoration:bold;color:#212529;">SQL Code:</span> {{trace.DATUM}}</p>
              <p><span style="text-decoration:bold;color:#212529;">Fehler Typ:</span> {{trace.ZEIT}}</p>                  
         </div>

          <div class="col1">
              <p><span style="text-decoration:bold;color:#212529;">Prozedur:</span> {{trace.WEBLGNNAME}}</p>        
              <p><span style="text-decoration:bold;color:#212529;">SQL State:</span> {{trace.DATUM}}</p>
              <p><span style="text-decoration:bold;color:#212529;">Status BS:</span> {{trace.ZEIT}}</p>               
          </div>

          <div class="col2">
              <p><span style="text-decoration:bold;color:#212529;">Job User:</span> {{trace.WEBLGNNAME}}</p>        
              <p><span style="text-decoration:bold;color:#212529;">Job Name:</span> {{trace.DATUM}}</p>
              <p><span style="text-decoration:bold;color:#212529;">Job Nummer:</span> {{trace.ZEIT}}</p>                  
          </div>

          <div class="col1">
              <p><span style="text-decoration:bold;color:#212529;">Remote Addresse:</span> {{trace.WEBLGNNAME}}</p>       
          </div>
        </div>  

Bootstrap v4.1.3，同样使用 AngularJS 框架。

Answer 1

用JQuery的Offset函数解决了。代码如下。

获取Modal的当前高度

    var x = parseInt(document.querySelector('.modal-content').style.top);

获取窗口高度偏移。

    var y =  parseInt($(window).scrollTop());

更新模态的高度偏移。我从窗口高度中减去当前模态高度的原因是，如果您多次执行此函数，它总是会添加到当前样式的顶部而不是替换它。

    $('.modal-content').offset({ top: x ? y - x : $(window).scrollTop(), left: 0 });