All geek questions in one place

JQuery UI dialog box interface does not darken bottom of page background with scroll bars

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

The problem is that there are scroll bars in your viewport and you are not at the top of the page, the background only darkens the part that will be visible if you are at the top of the page. This is similar to all browsers. Thank you in advance!

+4
source share
2 answers

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

 .ui-widget-overlay{position:fixed}
+7
source

I assume that you have floating content at the bottom of the page, looking at the size and shape of the body. Possibly an empty block element at the very bottom with float: none and clear: both to ensure the size of the body cover all visible elements (usually this is my quick and dirty fix).

0
source

Source: https://habr.com/ru/post/1480757/

More articles:


All Articles