Widget:ExternalDialog

<script> // Création du WindowManager une seule fois if (typeof window.externalWM === 'undefined') {

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

}

function ExternalIframeDialog(config) {

   ExternalIframeDialog.super.call(this, config);

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

ExternalIframeDialog.static.name = 'externalIframe'; ExternalIframeDialog.prototype.initialize = function () {

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

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

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

};

ExternalIframeDialog.prototype.getBodyHeight = function () {

   return this.config.height || 700;

};

// Fonction globale d'ouverture (plus fiable) window.openExternalOOUIDialog = function (url, title = 'Page externe', width = 1100, height = 750) {

   const dialog = new ExternalIframeDialog({
       size: 'large'
   });

   dialog.iframe.attr('src', url);
   dialog.setTitle(title);

   window.externalWM.addWindows([dialog]);
   window.externalWM.openWindow(dialog, {
       width: width,
       height: height
   });

   // Rendre la fenêtre déplaçable
   setTimeout(() => {
       dialog.$element.draggable({
           handle: '.oo-ui-window-head',
           containment: 'window'
       });
   }, 300);

}; </script>

<style> .oo-ui-windowManager-modal .oo-ui-window-frame {

   background-color: rgba(255, 255, 255, 0.96) !important;
   border-radius: 8px;
   box-shadow: 0 8px 25px rgba(0,0,0,0.5);

} .oo-ui-windowManager-overlay {

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

} </style>