AppCustom/DXApp
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve PDF Viewer popup styling and behavior

Browse Source 
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.
This commit is contained in:
OlgunR
2026-06-02 15:13:54 +02:00
parent 920dce13d5
commit c9ba7912fa
1 changed files with 26 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
DXApp.TemplateKitProject/Pages/Invoices/Details.cshtml
View File

@@ -109,12 +109,30 @@ else
.Height("90%") .Height("90%")
.ShowCloseButton(true) .ShowCloseButton(true)
.OnHiding("onPdfPopupHiding") .OnHiding("onPdfPopupHiding")
.Shading(true)
.ShadingColor("rgba(0, 0, 0, 0.5)")
.ContentTemplate(new JS(@"function() { .ContentTemplate(new JS(@"function() {
return '<iframe id=""pdf-iframe"" style=""width:100%;height:100%;border:none;""></iframe>'; 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> <script>
function openPdfViewer(invoiceId) { function openPdfViewer(invoiceId) {
var pdfUrl = window.location.origin + '/Invoices/ViewPdf?id=' + invoiceId; var pdfUrl = window.location.origin + '/Invoices/ViewPdf?id=' + invoiceId;
@@ -122,9 +140,17 @@ else
var popup = $('#pdf-viewer-popup').dxPopup('instance'); 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 // onShown sicherstellen dass iframe im DOM ist
popup.option('onShown', function () { popup.option('onShown', function () {
$('#pdf-iframe').attr('src', viewerUrl); $('#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(); popup.show();