Lately, I’ve done a few things with the jQuery UI Dialog:<\/p>\n
However, out of the box, the popup is\u00a0not 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.<\/p>\n
<\/p>\n
After declaring\u00a0some variables, I needed to grab the window object, which can be done by calling Then I needed to get the width and height of the window from that object.<\/p>\n Using a simple if\/else statement, you can\u00a0determine what the variables should be based on the window size. This is kind of like using Once these variables are set, you can assign them into the So, I ended up with the following:window<\/code>\u00a0in your JS file.<\/p>\n@media<\/code>\u00a0queries in CSS, just doing it a little more on the fly.<\/p>\ndialog<\/code>\u00a0object in your code. You’ll also see a disableScroll()<\/code>\u00a0function called in the gist below. This is outside the scope of this particular article, but easy enough to google:-).<\/p>\n
\n