CODEWITHSUNDEEP
jquerycss
Zac
Zac

Reputation: 12836

Have modal center of browser with css/jquery

I have a form that I need hidden until selected from a lengthy faq. It looks the best when I use something like fancybox or colorbox... however for some reason that I cant figure out it is breaking the submission action.

I have it working with just a simple show/hide with jquery and some css properties to position the modal. I can not get it to work as well as the plugins though.. for example the main problem is the hidden box is positioned absolute from the top of the page. This is a problem because if someone is scrolled down the page they will not see it until they scroll back up... the plugins always bring the modals dead center in the page regardless of where you are scrolled to. Can I achieve this just through css ?

Upvotes: 3

Views: 8103

Answers (1)

Matt Mitchell
Matt Mitchell

Reputation: 41823

If you change the position value to be fixed rather than absolute the element will scroll with the page movement.

For instance, .centerOfPage { position: fixed; top:50%; left:50%; } would keep the element in the middle of the "viewport", even while scrolling.

As for the broken submission, if you are triggering the modal on the form submit click, it's going to cancel your form submit with a return false; somewhere or other. I'm not sure where/how your modal is triggered though (more info needed).

Upvotes: 4

Related Questions