Lately, I’ve done a few things with the jQuery UI Dialog:
- In a plugin for making posts and drafts
- On a site for registration and logging in
- For playing around with:-)
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