Bootstrap Modal overlay problem

Hi all,
Here is a ink to 2 pages:
1. http://www.marlboroughaeroclub.co.nz/cms/index.php?page=Course-content
2. http://www.marlboroughaeroclub.co.nz/cms/

There is a newsletter sign up form field in the footer. Trying to submit the form without entering anything will result in a Modal popping up giving a validation error.
My problem is that on page 1 the modal overlay covers the modal content and on page 2 the overlay works as it should do.
To my tired eyes the structure and css or both pages is identical however there must be an element in the cascade that is causing the difference.
If anyone can spot it I would be very grateful.
Cheers,
N
LVL 5
Neil_BradleyWeb UX/UI DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
Personally, I would move your modal out of the "container" object.  Have the whole element at the bottom just before the </body> tag
0
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
That would be my preference too however not possible as the modal is generated within a content management system and the re programming would be considerable.
Link  2 which is the home page does not have the issue and the structural events of that page are identical to that of the inner pages (of which are causing the problem).
N
0
RobOwner (Aidellio)Commented:
Sure I can understand that. Does your homepage use a different template to the subsequent pages? It could be that the modal is included twice or initialized differently. I'll keep looking but these things will be easier for you to find.
How are you including the modal in the page?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Yes,
The template is different however the differences are extreme slight. The modal does not exist in the page prior to form submission.
In the first div tag after the opening body tag there is a style called fade. This is present in both the working and none working example however if I remove the fade class from the none working example it fixes the issue....
Clue maybe?.
0
RobOwner (Aidellio)Commented:
You do have a missing tag somewhere on the page that does work.

I would check your markup again - i'll also have a look through for what's missing
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Hi Rob,
all validation errors fixed. While this did not solve the problem it did point me in the right direction. In the end it was the animation css that was causing the problem.
Cheers for the pointers.
N
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.