Merge pull request #147 from Geta/fix/#72

Fix/#72 Show modal in same position (height) as trigger of modal

Author: jevgenijsp

src/Geta.NotFoundHandler.Admin/Areas/GetaNotFoundHandlerAdmin/Pages/Suggestions.cshtml

@@ -81,7 +81,7 @@
                         </div>
                     </div>
                     <div class="d-grid gap-2">
-                        <button type="submit" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#@referersModalId">
+                        <button type="submit" class="btn btn-secondary modal-trigger" data-bs-toggle="modal" data-bs-target="#@referersModalId">
                             <span data-feather="file-text"></span> referrers (@item.Referers.Count)
                         </button>
                     </div>

src/Geta.NotFoundHandler.Admin/wwwroot/GetaNotFoundHandlerAdmin/js/dashboard.js

@@ -1,16 +1,15 @@
 /* globals feather:false */
 
-(function() {
+(function () {
     'use strict';
 
     feather.replace();
 
-
     function clearInput() {
         var initiators = document.querySelectorAll('[data-clear]');
-        initiators.forEach(function(initiator) {
+        initiators.forEach(function (initiator) {
             initiator.addEventListener('click',
-                function(e) {
+                function (e) {
                     var target = e.currentTarget;
                     var selector = target.getAttribute('data-clear');
                     var input = document.querySelector(selector);
@@ -21,7 +20,7 @@
 
     function confirmSubmit() {
         var initiators = document.querySelectorAll('[data-confirm]');
-        initiators.forEach(function(initiator) {
+        initiators.forEach(function (initiator) {
             var form = initiator.form;
             form.addEventListener('submit',
                 function (e) {
@@ -36,6 +35,30 @@
         });
     }
 
+    function adjustModalPosition() {
+        var modalTriggers = document.querySelectorAll('.modal-trigger[data-bs-target]');
+        modalTriggers.forEach(function (modalTrigger) {
+            modalTrigger.addEventListener('click', function () {
+                var dialogSelector = modalTrigger.dataset.bsTarget + " .modal-dialog";
+
+                var modalDialog = document.querySelector(dialogSelector);
+                if (!modalDialog) { return; }
+
+                modalDialog.style = "position: fixed;" +
+                    "top: " + modalTrigger.getBoundingClientRect().top + "px;" +
+                    "left: 50%;" +
+                    "min-width: 500px;" +
+                    "transform: translate(-50%, -50%);";
+
+                var modalContent = document.querySelector(dialogSelector + " .modal-content");
+                if(!modalContent) { return; }
+
+                modalContent.style = "max-height: 300px;"; // we can't use here vh, due to iframe viewport, viewport is not static when scrollable 
+            });
+        });
+    }
+
     clearInput();
     confirmSubmit();
-})()
+    adjustModalPosition();
+})()