Skip to content

Instantly share code, notes, and snippets.

@jasonday
Last active June 23, 2021 18:26
Show Gist options
  • Save jasonday/5550879 to your computer and use it in GitHub Desktop.
Save jasonday/5550879 to your computer and use it in GitHub Desktop.
Responsive jQuery UI Dialog
// Demo: http://jsfiddle.net/jasonday/WxXLq/
// movemaine@gmail.com
$("#content").dialog({
width: 'auto', // overcomes width:'auto' and maxWidth bug
maxWidth: 600,
height: 'auto',
modal: true,
fluid: true, //new option
resizable: false
});
// on window resize run function
$(window).resize(function () {
fluidDialog();
});
// catch dialog if opened within a viewport smaller than the dialog width
$(document).on("dialogopen", ".ui-dialog", function (event, ui) {
fluidDialog();
});
function fluidDialog() {
var $visible = $(".ui-dialog:visible");
// each open dialog
$visible.each(function () {
var $this = $(this);
var dialog = $this.find(".ui-dialog-content").data("dialog");
// if fluid option == true
if (dialog.options.fluid) {
var wWidth = $(window).width();
// check window width against dialog width
if (wWidth < dialog.options.maxWidth + 50) {
// keep dialog from filling entire screen
$this.css("max-width", "90%");
} else {
// fix maxWidth bug
$this.css("max-width", dialog.options.maxWidth);
}
//reposition dialog
dialog.option("position", dialog.options.position);
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment