Keep modal centered as page scrolls

https://userinclude.com/allRise

Sorry for the delay. You could try something like
‘
#eModal-1 {
position:fixed:
}

Haven’t tested that though.

I can confirm the above fixes the modal if you scroll up and down +1

Glad you got it to work. Please take a moment to rate and review the plugin and or support https://www.ads-software.com/support/view/plugin-reviews/easy-modal.

I have added another eModal as a button link and I have noticed that eModal-1 stays centered (this is within my nav menu) but the second button link eModal-2 wont stay centred and fixed whilst scrolling?

Adding
#eModal-2 {
position:fixed;
}

Makes no difference at all?

Any idea why this is?

I think I have sorted this using media queries as follows.

I found it best not to have the modal fixed on mobile devices because it depends on the size of the modal.

I used the following css;

@media (min-width: 768px) {
#eModal-1  {
top:100px!important;
position:fixed;
}
}

@media (max-width: 480px) {
#eModal-1  {
top:50%!important;
margin-left:-47%;
}
}

@media (min-width: 768px) {
#eModal-2  {
top:100px!important;
position:fixed;
}
}

@media (max-width: 480px) {
#eModal-2  {
top:50%!important;
margin-left:-47%;
}
}

Correct, by default no modal is position fixed for that reason, content is always gonna be different sizes, if it is bigger than the screen fixed will make it impossible without another container with scolling enabled, to see the rest of the content.

For mobile this is essential. Your solution to use media queries is exactly correct.