Widget:ExternalDialog

<script> /* === External OOUI Dialog Widget === */

if (typeof window.myExternalWM === 'undefined') {

   window.myExternalWM = new OO.ui.WindowManager();
   $( 'body' ).append( window.myExternalWM.$element );

}

function ExternalIframeDialog( config ) {

   ExternalIframeDialog.super.call( this, config );

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

ExternalIframeDialog.static.name = 'externalIframeDialog';

ExternalIframeDialog.prototype.initialize = function () {

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

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

};

ExternalIframeDialog.prototype.getBodyHeight = function () {

   return this.config.height || 700;

};

// Fonction globale à appeler depuis la page window.openExtDialog = function ( url, title = 'Page externe', w = 1100, h = 750 ) {

   var dialog = new ExternalIframeDialog( { size: 'large' } );
   
   dialog.setTitle( title );
   dialog.iframe.attr( 'src', url );

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

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

}; </script>

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

   background: rgba(255, 255, 255, 0.97) !important;
   border-radius: 8px;

} .oo-ui-windowManager-overlay {

   background: rgba(0, 0, 0, 0.7) !important;

} </style>