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.
This commit is contained in:
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user