Modal Quittance

Bootstrap_new/css/style_office.css

@@ -687,14 +687,6 @@ body {
     font-weight: 600;
 }
 
-.modal-backdrop {
-    z-index: 9998 !important;
-}
-
-.modal {
-    z-index: 9999 !important;
-}
-
 
 /* ============================================
    RESPONSIVE DESIGN

Js/fonctions.js

@@ -570,59 +570,98 @@ function texte_cp()
 
 
 /**
- * Prépare et affiche le modal d'impression de la quittance client
+ * Ouvre le modal d'impression de quittance et charge son contenu via AJAX
+ * de manière compatible Bootstrap 5 (sans casser le backdrop).
+ *
+ * @param {number|string} idQuittance - Identifiant de la quittance à imprimer
  */
 function imprimer_quittance_client(idQuittance) {
-    debugger;
+
-    // 1. Validation de l'ID
+    /* ================================
+     * 1. Validation de l’identifiant
+     * ================================ */
     if (!idQuittance || parseInt(idQuittance) <= 0) {
         const v_msg = "Rien à imprimer !";
         const v_msgEng = "Nothing to print!";
 
-        // Utilisation de votre fonction personnalisée
+        // Utilisation de l’alerte métier si disponible
         if (typeof alert_ebene === "function") {
             alert_ebene(v_msg, v_msgEng);
         } else {
             alert(v_msg);
         }
-        return;
+        return; // Arrêt immédiat
     }
 
+    /* ================================
+     * 2. Initialisation des références
+     * ================================ */
     const racine = $("#racineWeb").val() || "/";
-    const $divExport = $('#div_export_quittance');
-    const $btnTrigger = $("#btn_export_quittance");
 
-    // 2. Préparation du loader dans le modal
+    // Élément DOM du modal Bootstrap
-    $divExport.html(`
+    const modalEl = document.getElementById('pop_export_quittance');
+
+    // Conteneur qui recevra le contenu AJAX
+    const divExport = document.getElementById('div_export_quittance');
+
+    /* ===================================================
+     * 3. Préparation du contenu AVANT ouverture du modal
+     *    (évite les reflow destructeurs après show())
+     * =================================================== */
+    divExport.innerHTML = `
         <div class="text-center my-5 py-5">
-            <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
+            <div class="spinner-border text-primary" role="status"
+                 style="width: 3rem; height: 3rem;">
                 <span class="visually-hidden">Chargement...</span>
             </div>
-            <p class="mt-3 text-muted fw-bold">Génération du document client en cours...</p>
+            <p class="mt-3 text-muted fw-bold">
+                Génération du document client en cours...
+            </p>
         </div>
-    `);
+    `;
 
-    // 3. Ouverture du modal
+    /* ===================================================
-    $btnTrigger.click();
+     * 4. Création ou récupération de l’instance Bootstrap
-
+     *    (Bootstrap 5 = gestion impérative par instance)
-    // 4. Appel AJAX
+     * =================================================== */
-    $.ajax({
+    const modal = bootstrap.Modal.getOrCreateInstance(modalEl, {
-        url: racine + "Ajaxexporterunequittanceclient/",
+        backdrop: 'static', // Empêche la fermeture au clic extérieur
-        type: 'POST',
+        keyboard: false     // Désactive la touche ESC
-        data: { idQuittance: idQuittance }, // Passage par objet (plus propre)
-        success: function(data) {
-            // On injecte le contenu avec un petit effet de transition
-            $divExport.hide().html(data).fadeIn(200);
-        },
-        error: function(xhr, status, error) {
-            $divExport.html(`
-                <div class="alert alert-danger m-3 shadow-sm">
-                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
-                    <strong>Erreur :</strong> Impossible de générer la quittance. 
-                    <small class="d-block text-muted mt-1">${error}</small>
-                </div>
-            `);
-            console.error("[Print] Erreur AJAX:", status, error);
-        }
     });
+
+    /* ===================================================
+     * 5. Chargement AJAX APRES affichage du modal
+     *    (événement déclenché une seule fois)
+     * =================================================== */
+    modalEl.addEventListener('shown.bs.modal', function () {
+
+        $.ajax({
+            url: racine + "Ajaxexporterunequittanceclient/",
+            type: 'POST',
+            data: { idQuittance: idQuittance },
+
+            // Succès : injection directe du HTML (sans animation JS)
+            success: function (data) {
+                divExport.innerHTML = data;
+            },
+
+            // Erreur : message utilisateur + log console
+            error: function (xhr, status, error) {
+                divExport.innerHTML = `
+                    <div class="alert alert-danger m-3 shadow-sm">
+                        <strong>Erreur :</strong>
+                        Impossible de générer la quittance.
+                        <small class="d-block text-muted mt-1">${error}</small>
+                    </div>
+                `;
+                console.error("[Print] Erreur AJAX:", status, error);
+            }
+        });
+
+    }, { once: true }); // Sécurise contre les appels multiples
+
+    /* ================================
+     * 6. Ouverture propre du modal
+     * ================================ */
+    modal.show();
 }

Vue/Ajaxfichepolice/index.php

@@ -71,7 +71,7 @@
     <button class="sr-only"  id="btn_export_quittance" name="btn_export_quittance" type="button" data-bs-toggle="modal" data-bs-target="#pop_export_quittance" > </button>
     
     
-    <div class="modal fade modal-office" id="pop_export_quittance" tabindex="-1" aria-labelledby="messagesModalLabel" aria-hidden="true">
+    <div class="modal fade modal-office" id="pop_export_quittance" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false">
         <div class="modal-dialog modal-lg modal-dialog-centered">
             <div class="modal-content border-0 shadow-lg">
                 <div class="modal-header bg-office-blue text-white">

Vue/Emission/index.php

@@ -219,7 +219,7 @@
 
 <button class="sr-only"  id="btn_export_quittance" name="btn_export_quittance" type="button" data-bs-toggle="modal" data-bs-target="#pop_export_quittance" > </button>
 
-<div class="modal fade" id="pop_export_quittance" role="dialog">
+<div class="modal fade modal-office" id="pop_export_quittance" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false">
 	<div class="modal-dialog modal-lg">
 		<div class="modal-content">