Im currently working on a website where a table with a long list of data is being loaded. When scrolling down, each field has a button that can open up a Modal Window to view more information on that specific set of data. The Modal window however always opens up on the top of the page and is therefore not visible. I could handle this by scrolling up automatically but this is not a good solution. What could I do to make the Modal Window always open up in sight?
Code for Modal Window:
<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">×</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, also using AngularJS Framework.
</body>
tag.