Making a JQuery Dialog pop up box responsive
I tried the demo from this answer and it worked when i resize my laptop browser. haven't tried on mobile, though.
Responsive jQuery UI Dialog ( and a fix for maxWidth bug )
the demo here: http://codepen.io/jasonday/pen/amlqz
edit:
looks like it works with:
jquery-1.10.1.js
jquery-ui-1.9.2.js
$( "#dialog-new" ).dialog({
autoOpen: true,
width: 'auto', // overcomes width:'auto' and maxWidth bug
height: 300,
maxWidth: 600,
modal: true,
fluid: true, //new option
resizable: false,
open: function(event, ui){
fluidDialog(); // needed when autoOpen is set to true in this codepen
},
buttons: {
"Clear Form": function() {
....
});
// run function on all dialog opens
$(document).on("dialogopen", ".ui-dialog", function (event, ui) {
fluidDialog();
});
// remove window resize namespace
$(document).on("dialogclose", ".ui-dialog", function (event, ui) {
$(window).off("resize.responsive");
});
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.maxWidth && dialog.options.width) {
// fix maxWidth bug
$this.css("max-width", dialog.options.maxWidth);
//reposition dialog
dialog.option("position", dialog.options.position);
}
if (dialog.options.fluid) {
// namespace window resize
$(window).on("resize.responsive", function () {
var wWidth = $(window).width();
// check window width against dialog width
if (wWidth < dialog.options.maxWidth + 50) {
// keep dialog from filling entire screen
$this.css("width", "90%");
}
//reposition dialog
dialog.option("position", dialog.options.position);
});
}
});
}
Derek
Updated on June 04, 2022Comments
-
Derek almost 2 years
My school organization currently has a website that incorporates JQuery and uses "dialog" pop up boxes (JQuery-UI?). I am making the website responsive but do not know how to go about making the dialog boxes responsive. The only solution I have found is JQuery mobile but I am not sure how to implement it into our current website. I know my question is a little vague but I was wondering if anyone has a simple solution?
Here is what I believe to be the code for one of my pop-up boxes. ( I don't understand code very well) Any and all help is appreciated.
$( "#dialog-new" ).dialog({ resizable: false, width:900, modal: true, autoOpen: false, buttons: { "Clear Form": function() { clearForm($("#newapsform")); }, "Create Request": function() { if(formIsOkay($("#newapsform"))) { $.ajax ({ type: "POST", url: "system/aps2.newrequest.php", data: $("#newapsform").serialize(), success: function() { $( "#dialog-new" ).dialog( "close" ); $("#goodmsg").html("Created photo request successfully!"); $('#goodmsgdiv').fadeIn(1500).delay(3000).fadeOut(1500); datatables.fnDraw(); searchtables.fnDraw(); phototables.fnDraw(); clearForm($("#newapsform")); }, error: function() { $( "#dialog-new" ).dialog( "close" ); $("#badmsg").html("Could not create request: Use the force next time."); $('#badmsgdiv').fadeIn(1500).delay(3000).fadeOut(1500); } }); } } } });
-
Derek almost 11 yearsCould you possibly post how to implement that into my current code. I'm not a very strong coder. :(