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
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
Rob
Personally, I would move your modal out of the "container" object. Have the whole element at the bottom just before the </body> tag
ASKER
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
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
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?
How are you including the modal in the page?
ASKER
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?.
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?.
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
I would check your markup again - i'll also have a look through for what's missing
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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