jQuery dialog fluide

by oilvier

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button type="button" class="foo">Dialog</button>
<div id="dialog">Coucou</div>

SCSS

/* z-index pour tous les modules */
.ui-front {z-index:100;}

/* ==========================================================================
   ## Dialog
   ========================================================================== */ 
.ui-dialog {position:fixed; max-height:95vh; background:white; overflow-y:auto; border-radius:5px;}
	.ui-dialog-titlebar {}
	.ui-dialog-content {padding:20px;}
	
/* ==========================================================================
   ## Overlay
   ========================================================================== */
.ui-widget-overlay {background:black; position:fixed; top:0; left:0; width:100%; height:100%; opacity:.8;}

JavaScript

var fluidDialog = function fluidDialog() {
	// each open dialog
	$(".ui-dialog:visible").each(function () {
		var $this	= $(this);
		var dialog	= $this.find(".ui-dialog-content").data("ui-dialog");

		// if fluid option == true
		if (undefined !== dialog && dialog.options.fluid) {
			var wWidth = $(window).width();

			// check window width against dialog width
			if (wWidth < (parseInt(dialog.options.maxWidth) + 50))  {
				// keep dialog from filling entire screen
				$this.css("max-width", "90%");
				$this.css("min-width", "90%");
			} else {
				// fix maxWidth bug
				$this.css("max-width", dialog.options.maxWidth + "px");
				$this.css("min-width", dialog.options.minWidth + "px");
			}

			// reposition dialog
			dialog.option("position", dialog.options.position);
		}
	});
};

var dialog = $("#dialog").dialog({
	autoOpen: false,
	modal: true,
	fluid: true,
	dialogClass: "dialog",
	width: 'auto', // overcomes width:'auto' and maxWidth bug
	maxWidth: 810,
	minWidth: 800,
	closeText: "Fermer",
	resizable: false,
	create: function() {
		
		fluidDialog();
	}
}).delegate(".ui-widget-overlay", "click", function() {
	dialog.dialog("close");

	return false;
});

$(window).on("resize", function () {
	fluidDialog();
});

$(document).on("click", ".ui-widget-overlay", function () {
	dialog.dialog('close');
	return false;
}).on("dialogopen", ".ui-dialog", function () {
	fluidDialog();
});

$('.foo').on('click', function() {
	dialog.dialog( "open" );
});