How to Make jQuery’s Dialog Popup Responsive with JavaScript

Lately, I’ve done a few things with the jQuery UI Dialog:

However, out of the box, the popup is not responsive. Since the height and width of the dialog modal are set in JavaScript, I wanted to make sure that I was able to change the width and height there too.

After declaring some variables, I needed to grab the window object, which can be done by calling window in your JS file.

Then I needed to get the width and height of the window from that object.

Using a simple if/else statement, you can determine what the variables should be based on the window size. This is kind of like using @media queries in CSS, just doing it a little more on the fly.

Once these variables are set, you can assign them into the dialog object in your code. You’ll also see a disableScroll() function called in the gist below. This is outside the scope of this particular article, but easy enough to google:-).

So, I ended up with the following:

As you can see, it’s pretty easy to do, but this way, it’s all done in the JS, and leaves your media queries a little cleaner. Obviously, you can put in whatever breakpoints you want. I just  needed the one break point, since this particular popup will never get any bigger than 500px.

I hope this is helpful to anyone who needs it. If it is, let me know in the comments below.

Cheers!

###

Nate

Leave a Reply

Your email address will not be published. Required fields are marked *