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:-)
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.