From c9ba7912fa3e92184f67643f5f8add06c8728e8f Mon Sep 17 00:00:00 2001
From: OlgunR <OlgunR@DD-PC-ENT05N>
Date: Tue, 2 Jun 2026 15:13:54 +0200
Subject: [PATCH] Improve PDF Viewer popup styling and behavior

Added shading and overlay color to the PDF Viewer popup for better user experience. Adjusted z-index values in the `<style>` block to ensure the popup and its overlay appear above other elements. Updated the `openPdfViewer` function to explicitly set the container and position options, and ensured z-index values are reapplied after the popup is shown.
---
 .../Pages/Invoices/Details.cshtml             | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/DXApp.TemplateKitProject/Pages/Invoices/Details.cshtml b/DXApp.TemplateKitProject/Pages/Invoices/Details.cshtml
index 3195e07..5fe836e 100644
--- a/DXApp.TemplateKitProject/Pages/Invoices/Details.cshtml
+++ b/DXApp.TemplateKitProject/Pages/Invoices/Details.cshtml
@@ -109,12 +109,30 @@ else
     .Height("90%")
     .ShowCloseButton(true)
     .OnHiding("onPdfPopupHiding")
+    .Shading(true)
+    .ShadingColor("rgba(0, 0, 0, 0.5)")
     .ContentTemplate(new JS(@"function() {
         return '<iframe id=""pdf-iframe"" style=""width:100%;height:100%;border:none;""></iframe>';
     }"))
 )
 }
 
+<style>
+    /* Z-Index für PDF-Viewer Popup erhöhen - muss höher sein als layout-header (1505) */
+    .dx-popup-wrapper.dx-overlay-wrapper {
+        z-index: 10500 !important;
+    }
+    
+    .dx-overlay-shader {
+        z-index: 10499 !important;
+    }
+    
+    /* Spezifisch für unser PDF-Popup */
+    #pdf-viewer-popup .dx-overlay-content {
+        z-index: 10500 !important;
+    }
+</style>
+
 <script>
     function openPdfViewer(invoiceId) {
         var pdfUrl = window.location.origin + '/Invoices/ViewPdf?id=' + invoiceId;
@@ -122,9 +140,17 @@ else
 
         var popup = $('#pdf-viewer-popup').dxPopup('instance');
 
+        // Z-Index explizit setzen (höher als layout-header mit 1505)
+        popup.option('container', undefined); // Default container verwenden
+        popup.option('position', { my: 'center', at: 'center', of: window });
+        
         // onShown sicherstellen dass iframe im DOM ist
         popup.option('onShown', function () {
             $('#pdf-iframe').attr('src', viewerUrl);
+            
+            // Z-Index nach dem Öffnen nochmal sicherstellen
+            $('.dx-popup-wrapper').css('z-index', '10500');
+            $('.dx-overlay-shader').css('z-index', '10499');
         });
 
         popup.show();