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:
| //Get Window Screen Width | |
| var screenWidth, screenHeight, dialogWidth, dialogHeight, isDesktop; | |
| screenWidth = window.screen.width; | |
| screenHeight = window.screen.height; | |
| if ( screenWidth < 500 ) { | |
| dialogWidth = screenWidth * .95; | |
| dialogHeight = screenHeight * .95; | |
| } else { | |
| dialogWidth = 500; | |
| dialogHeight = 500; | |
| isDesktop = true; | |
| } | |
| setTimeout(function(){ | |
| $(function() { | |
| $("#n8f-popup-login-message").dialog({ | |
| title: 'Welcome to Startup Academy!', | |
| draggable: false, | |
| modal: true, | |
| height: dialogHeight, | |
| width: dialogWidth, | |
| closeOnEscape: false, | |
| open: function() { | |
| if(isDesktop) { | |
| disableScroll(); | |
| } | |
| } | |
| }); | |
| }); | |
| }, 2000); |
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