Widget:ExternalDialog

<script> // Création du gestionnaire de fenêtres OOUI (une seule fois) if (!window.externalWindowManager) {

   window.externalWindowManager = new OO.ui.WindowManager();
   $(document.body).append(window.externalWindowManager.$element);

}

// Classe du Dialog personnalisé function ExternalIframeDialog(config) {

   ExternalIframeDialog.super.call(this, config);

} OO.inheritClass(ExternalIframeDialog, OO.ui.Dialog);

ExternalIframeDialog.static.name = 'externalIframeDialog'; ExternalIframeDialog.static.title = 'Chargement...'; // sera mis à jour dynamiquement ExternalIframeDialog.static.size = 'large'; // taille par défaut (small/medium/large)

ExternalIframeDialog.prototype.initialize = function () {

   ExternalIframeDialog.super.prototype.initialize.call(this);

   this.$element.addClass('external-iframe-dialog');

   this.iframe = $('<iframe>')
       .attr('frameborder', 0)
       .attr('allowfullscreen', true)
       .css({
           width: '100%',
           height: '100%',
           border: 'none'
       });

   this.panel = new OO.ui.PanelLayout({
       padded: false,
       expanded: true,
       scrollable: false
   });

   this.panel.$element.append(this.iframe);
   this.$body.append(this.panel.$element);

};

// Permet de définir la taille du contenu ExternalIframeDialog.prototype.getBodyHeight = function () {

   return this.height || 600;   // hauteur par défaut

};

// Fonction globale pour ouvrir le dialog window.openExternalDialog = function (url, title = 'Page externe', width = 1000, height = 700) {

   const dialog = new ExternalIframeDialog({
       size: 'large'   // on gère la taille manuellement via CSS
   });

   dialog.title = title;
   dialog.height = height;

   externalWindowManager.addWindows([dialog]);

   // Mise à jour du titre
   dialog.setTitle(title);

   // Chargement de l'iframe
   dialog.iframe.attr('src', url);

   // Ouverture avec taille personnalisée
   externalWindowManager.openWindow(dialog, {
       width: width,
       height: height
   });

   // Rendre le dialog déplaçable (draggable)
   setTimeout(() => {
       dialog.$element.draggable({
           handle: '.oo-ui-window-head',   // barre de titre
           containment: 'window'
       });
   }, 100);

}; </script>

<style> /* Fond partiellement transparent */ .external-iframe-dialog .oo-ui-window-frame {

   background-color: rgba(255, 255, 255, 0.95) !important;
   border-radius: 8px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);

}

/* Légère transparence sur le overlay */ .oo-ui-windowManager-modal > .oo-ui-windowManager-overlay {

   background-color: rgba(0, 0, 0, 0.65) !important;

} </style>