Modal background not filling whole window

HTML & CSS
1

I’m trying to use the foundation’s revel modal script. The trouble is the site isn’t built using all foundation framework at this stage I wish to just use UI elements of it. For this reason and in particular the fact I’m not using thier grid that I’m getting problems.

The modal is working yet the background when the modal is active only covers a little of the screen - example is seen here.

I want the background to completly cover the screen as per normal…

2

Hi,

You are over-riding some of the modal’s rules due to its position in the html and are applying a width to it via he following rule:


.news-item div {
    float: right;
    width: 355px;
}

You can over-ride those styles with an important declaration like this.


.reveal-modal-bg {
    background: rgba(0, 0, 0, 0.45);
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    bottom:0;
    width: auto !important;
    z-index: 40;
}

I also set the dimensions using top, bottom right and left at the same time so know widths or height are needed.

The modal background could actually be outside the current html anyway on its own because it is a fixed positioned element and always relates to the viewport (unless of course the script requires it to be where it is -which I didn’t check.

3

Paul for the second time today - thank you. How did you know which rule was overiding the modal’s?

4

Just look in the Firebug panel and you can see all the rules that apply to a given element and where they came from. Chrome has a similar inspector which can show you where rules have come from. (Even IE has developer tools but they are not as useful as the ones above.)

5

Ah yes I see this I think - (make sure ‘Only show applied styles’ is clicked on the CSS panel?) this is very useful -thanks.