/** * Trendmetrik — Bootstrap 5 Modal Merkezi Standardı * * Z-index kaynağı: `static/css/tm-z-layers.css` (tek kaynak, CSS değişkenleri). * JS tarafı: `static/js/tm-modal-manager.js` (backdrop reparenting + body lock). * * KÖKEN SORUN ve ÇÖZÜM * Bootstrap `.modal-backdrop`'u ``'ye ekler. Eğer modal bir stacking * context'li container'da (örn. `main#mainContent.tmv2-page` position:relative * +z-index:1, `.page-shell` isolation:isolate, `.tmv2-analysis-root` vb.) * render edildiyse, modal'ın efektif z-index'i ata'ya göre 1'e sıkışır; body * root'undaki backdrop (1050) ise üstte kalır → dialog tıklanamaz / perdeli. * * ÇÖZÜM: tm-modal-manager.js backdrop'u MODAL elementinin İÇİNE, dialog'un * ÖNCESİNE taşır. Aynı stacking context + DOM sırası (backdrop → dialog) * sayesinde dialog DAİMA üstte çizilir. Sayfa-özel z-index override'ları * (9999/999999 vb.) modalı kırsa bile bu mekanizma bağımsız çalışır. * * PROJE KURALI * Yeni modal stillerinde: * - `.modal` z-index'ini DEĞİŞTİRMEYİN (tm-z-layers.css ele alır) * - `.modal-backdrop` z-index'ini DEĞİŞTİRMEYİN * - Custom overlay/perde kullanıyorsanız class adı `.modal-backdrop` * OLMAMALI; kendi class'ınızı verin + `body.modal-open` altında gizleyin * (tm-z-layers.css'deki guard rule örneğine bakın). * - `pointer-events` yalnızca `.modal-dialog` / `.modal-content` üzerinde * `auto` olmalı; `.modal.show` Bootstrap gereği `pointer-events: none`. */ /* ---- Pointer-events (Bootstrap 5 default + defensive overrides) ---- */ .modal.show, body > .modal.show { pointer-events: none !important; } .modal.show .modal-dialog, .modal.show .modal-content, .modal.show .modal-header, .modal.show .modal-body, .modal.show .modal-footer, body > .modal.show .modal-dialog { pointer-events: auto !important; } /* Backdrop — click-outside dismiss için tıklanabilir; modal içine taşındığında da korunur (Bootstrap mousedown listener DOM pozisyonundan bağımsız). */ .modal-backdrop, .modal-backdrop.fade, .modal-backdrop.show, .modal-backdrop.fade.show { pointer-events: auto !important; } /* ---- Z-index (hard-pin: sayfa override'larına karşı) ---- */ body > .modal, body > .modal.fade, body > .modal.show, body > .modal.fade.show { z-index: var(--tm-z-modal, 1055) !important; } body > .modal-backdrop, body > .modal-backdrop.fade, body > .modal-backdrop.show, body > .modal-backdrop.fade.show { z-index: var(--tm-z-modal-backdrop, 1050) !important; } /* ---- Backdrop modal'ın İÇİNE taşındığında (tm-modal-manager.js) ---- */ /* Modal kendi stacking context'ini oluşturur (z:1055). İçindeki backdrop absolute + inset:0 ile modal viewport'unu kaplar, z:0; dialog relative z:1 — dialog DAİMA backdrop'un üstüne çizilir. */ .modal.show > .modal-backdrop, body > .modal.show > .modal-backdrop { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; z-index: 0 !important; } .modal.show > .modal-dialog, body > .modal.show > .modal-dialog { position: relative; z-index: 1; } /* ---- Modal açıkken yan UI elementleri ---- */ body.modal-open #tmFbkOpen, body.modal-open .tm-feedback-partial-fab { pointer-events: none; } body.modal-open #tmFbkRoot.tm-fbk-root-shell:not(.tm-fbk--open) { pointer-events: none !important; } /* ---- Sayfa-özel legacy override'ları ETKİSİZLEŞTİR ---- */ /* Bazı sayfalar hâlâ scope'lu override verebilir (`.order-profit-page .modal`, `.product-delete-page .modal-backdrop` vb.). `body >` öncülünü kullandığımız kurallar, sayfa scope'undan bağımsız olduğu için çakışma durumunda CSS cascade sırasında YİNE kazanır (specificity: `body.modal-open .x` = 0,1,1,1 vs sayfa `.page .modal` = 0,0,2,0). Garantiyi `!important` ile sağlıyoruz. */