jQuery UI modal dialog background doesn't darken bottom of page background when scrollbars are present

Question

I have a jQuery UI modal dialog on http://www.citizenshipworks.org/ that appears when you click on the Go button to the right of 'Enter your mobile number to receive text alerts'. (You may leave the text input field blank).

The issue is if your viewport has scrollbars and you aren't at the top of the page, the background only darkens the portion that would be visible if you are at the top of the page. This seems to happen on all browsers. Thanks in advance!

Answer 1

Just set CSS position to fixed for .ui-widget-overlay:

.ui-widget-overlay{position:fixed}