Solved

Bootstrap Modal overlay problem

Posted on 2014-09-04
7
497 Views
Last Modified: 2014-09-07
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
0
Comment
Question by:Neil_Bradley
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 40307232
Personally, I would move your modal out of the "container" object.  Have the whole element at the bottom just before the </body> tag
0
 
LVL 5

Author Comment

by:Neil_Bradley
ID: 40307270
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
 
LVL 43

Expert Comment

by:Rob
ID: 40307290
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 5

Author Comment

by:Neil_Bradley
ID: 40307327
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
 
LVL 43

Expert Comment

by:Rob
ID: 40307426
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
 
LVL 43

Accepted Solution

by:
Rob earned 500 total points
ID: 40307427
0
 
LVL 5

Author Closing Comment

by:Neil_Bradley
ID: 40308993
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

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question